From 51d65dec8dc10d8233337cc487a0751c30bbc08f Mon Sep 17 00:00:00 2001
From: Mathla Alwahaibi <mathlaalwahaibi95@gmail.com>
Date: Wed, 18 Jun 2025 15:26:33 +0400
Subject: [PATCH 1/6] Done with both tasks

---
 index.html            |  7 ++---
 js/message_manager.js | 73 +++++++++++++++++++++++++++++++++++++------
 2 files changed, 65 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 7e6c14b..7565c6e 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,8 @@
   </head>
   <body>
 
-    <h1>Welcome Team Design Dynamo!</h1>
-    <h2>
-      We as a team, provides design services to anyone who wants to make their site look 
-      more interactive. <a href="https://www.google.com">Take me to google</a>
-    </h2>
+      <div id="nameDisplay"> </div>
+   
     <script src="./js/message_manager.js">
     </script>
   </body>
diff --git a/js/message_manager.js b/js/message_manager.js
index 6961490..0d2a915 100644
--- a/js/message_manager.js
+++ b/js/message_manager.js
@@ -1,19 +1,72 @@
-const teamName = "Design Dynamos";
-console.log(teamName.toUpperCase());
-console.log(teamName);
 
-let age = 30;
 
-age = age + 1;
+// task 3:
+function printEvenNumber(numbE) {
+  return numbE % 2 === 0;
+}
+
+function printOddNumber(numbO) {
+  return numbO % 2 !== 0;
+}
+
+let qaisarry = [1, 2, 3, 4, 5, 6, 8, 56];
+
+
+let showEven = true; 
 
 
-if (true) {
-  {
-    let currentDate = "2023-10-01";
-    const NUMBER_OF_DAYS_IN_WEEK = 7;
 
+if (showEven) {
 
+  let aa = qaisarry.filter(printEvenNumber);
+  console.log("Even numbers:", aa);
 
 
-  }
+} else {
+
+
+  let bb = qaisarry.filter(printOddNumber);
+  console.log("Odd numbers:", bb);
 }
+
+//  const numbers = [2, 5, 6, 8, 10, 12, 13];
+
+   
+//     function showEvenAndOdd(arr) {
+//       console.log("Even Numbers");
+
+//       arr.forEach(function(num1) {
+//         if (num1 % 2 === 0) {
+//           console.log(num1);
+//         }
+//       });
+
+//       console.log("Odd Numbers");
+//       arr.forEach(function(num2) {
+//         if (num2 % 2 !== 0) {
+//           console.log(num2);
+//         }
+//       });
+//     }
+
+//     showEvenAndOdd(numbers);
+
+
+
+
+// task 1:
+    function showNameInTurns() {
+
+      let fullName = "QAIS ALAMRANI"; 
+      let nameParts = fullName.split(" "); 
+      let display = document.getElementById("nameDisplay"); 
+
+     
+      for (let i = 0; i < nameParts.length; i++) {
+        setTimeout(function() { display.textContent = nameParts[i];  }, i * 1000); 
+      }
+    }
+
+   window.onload = showNameInTurns;
+
+// task 2 

From b5b94aca26a2d3d515c026de5d790090c630a2d2 Mon Sep 17 00:00:00 2001
From: Mathla Alwahaibi <mathlaalwahaibi95@gmail.com>
Date: Thu, 19 Jun 2025 10:26:48 +0400
Subject: [PATCH 2/6] updted after re arrange a line space

---
 Examples/from_qais/message_manager.js | 46 ++++++++-------------------
 1 file changed, 13 insertions(+), 33 deletions(-)

diff --git a/Examples/from_qais/message_manager.js b/Examples/from_qais/message_manager.js
index 0d2a915..f6a960b 100644
--- a/Examples/from_qais/message_manager.js
+++ b/Examples/from_qais/message_manager.js
@@ -1,37 +1,23 @@
-
-
 // task 3:
 function printEvenNumber(numbE) {
   return numbE % 2 === 0;
 }
-
 function printOddNumber(numbO) {
   return numbO % 2 !== 0;
 }
 
 let qaisarry = [1, 2, 3, 4, 5, 6, 8, 56];
-
-
 let showEven = true; 
-
-
-
 if (showEven) {
-
-  let aa = qaisarry.filter(printEvenNumber);
-  console.log("Even numbers:", aa);
-
+ let aa = qaisarry.filter(printEvenNumber);
+ console.log("Even numbers:", aa);
 
 } else {
-
-
   let bb = qaisarry.filter(printOddNumber);
   console.log("Odd numbers:", bb);
 }
-
 //  const numbers = [2, 5, 6, 8, 10, 12, 13];
 
-   
 //     function showEvenAndOdd(arr) {
 //       console.log("Even Numbers");
 
@@ -51,22 +37,16 @@ if (showEven) {
 
 //     showEvenAndOdd(numbers);
 
-
-
-
 // task 1:
-    function showNameInTurns() {
-
-      let fullName = "QAIS ALAMRANI"; 
-      let nameParts = fullName.split(" "); 
-      let display = document.getElementById("nameDisplay"); 
-
-     
-      for (let i = 0; i < nameParts.length; i++) {
-        setTimeout(function() { display.textContent = nameParts[i];  }, i * 1000); 
-      }
-    }
-
-   window.onload = showNameInTurns;
+function showNameInTurns() {
+let fullName = "QAIS ALAMRANI"; 
+let nameParts = fullName.split(" "); 
+let display = document.getElementById("nameDisplay"); 
+  for (let i = 0; i < nameParts.length; i++) {
+      setTimeout(function() 
+      { display.textContent = nameParts[i];  }, i * 1000); 
+  }
+}
+window.onload = showNameInTurns;
 
-// task 2 
+   // task 2: 

From ca2dfc8499c33d8d79c3ae3c9170d77416095928 Mon Sep 17 00:00:00 2001
From: Mathla Alwahaibi <mathlaalwahaibi95@gmail.com>
Date: Thu, 26 Jun 2025 08:50:18 +0400
Subject: [PATCH 3/6] updated message manager

---
 Examples/from_qais/message_manager.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/Examples/from_qais/message_manager.js b/Examples/from_qais/message_manager.js
index f6a960b..0ecc011 100644
--- a/Examples/from_qais/message_manager.js
+++ b/Examples/from_qais/message_manager.js
@@ -50,3 +50,12 @@ let display = document.getElementById("nameDisplay");
 window.onload = showNameInTurns;
 
    // task 2: 
+function newFunction(name1, name2) {
+  name1 = "qais";
+  name2 = "alamrani";
+  const fullName = name1 + " " + name2;
+  console.log(fullName);
+}
+
+newFunction();
+        
\ No newline at end of file

From 56d3429e495b54564a3c62d2dd89b7d94b1c1239 Mon Sep 17 00:00:00 2001
From: Mathla Alwahaibi <mathlaalwahaibi95@gmail.com>
Date: Thu, 26 Jun 2025 10:29:47 +0400
Subject: [PATCH 4/6] maped of name to team

---
 examples_src/from_qais/MapOfName.js | 15 +++++++++++++++
 examples_src/from_qais/index.html   |  5 ++++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 examples_src/from_qais/MapOfName.js

diff --git a/examples_src/from_qais/MapOfName.js b/examples_src/from_qais/MapOfName.js
new file mode 100644
index 0000000..ce45532
--- /dev/null
+++ b/examples_src/from_qais/MapOfName.js
@@ -0,0 +1,15 @@
+const ListOfName=["QAIS","MIAAD","MOHAMMED","QABASS"];
+const myMapList= ListOfName.map((Q) => {
+
+   let NameOfTeam = "";
+
+    const FLetter = Q.charAt(0).toUpperCase();
+    nameOFTeam = `${Q} [team ${FLetter}]`
+    return nameOFTeam;
+
+});
+
+console.log(myMapList);
+
+
+
diff --git a/examples_src/from_qais/index.html b/examples_src/from_qais/index.html
index 798d322..d63e0e0 100644
--- a/examples_src/from_qais/index.html
+++ b/examples_src/from_qais/index.html
@@ -1,9 +1,12 @@
+<!DOCTYPE html>
 <html>
 <head>
+    
 </head>
 <body>
     
 <div id ="nameDisplay"></div>
-<script src="message_manager.js"></script>
+<script src="message_manager.js"></script> 
+<script src="MapOfName.js"></script>
 </body>
 </html>
\ No newline at end of file

From cc70074d4ab8c6e56110897afde134e25b449ff7 Mon Sep 17 00:00:00 2001
From: QAIS <19F19720@mec.edu.om>
Date: Tue, 1 Jul 2025 22:49:28 +0400
Subject: [PATCH 5/6] updted task 17

---
 examples_src/from_qais/LissOfUComplien.js     | 158 +++++++++
 .../from_qais/listOfUsersComplin.html         | 333 ++++++++++++++++++
 2 files changed, 491 insertions(+)
 create mode 100644 examples_src/from_qais/LissOfUComplien.js
 create mode 100644 examples_src/from_qais/listOfUsersComplin.html

diff --git a/examples_src/from_qais/LissOfUComplien.js b/examples_src/from_qais/LissOfUComplien.js
new file mode 100644
index 0000000..c7a4317
--- /dev/null
+++ b/examples_src/from_qais/LissOfUComplien.js
@@ -0,0 +1,158 @@
+  const ListOfUsers = ["QAIS", "MIAAD", "MOHAMMED", "QABASS", "SARA", "AHMED"];
+        
+        const UserComplaints = {
+            "QAIS": [
+                {id: 1, title: "Login Issue", description: "Cannot login to my account since yesterday", status: "Open"},
+                {id: 2, title: "Payment Problem", description: "My payment was charged twice", status: "In Progress"},
+                {id: 3, title: "Slow Loading", description: "Website takes too long to load", status: "Resolved"}
+            ],
+            "MIAAD": [
+                {id: 4, title: "Profile Update", description: "Unable to update my profile picture", status: "Open"},
+                {id: 5, title: "Email Notification", description: "Not receiving email notifications", status: "Open"}
+            ],
+            "MOHAMMED": [
+                {id: 6, title: "Password Reset", description: "Password reset link not working", status: "In Progress"},
+                {id: 7, title: "Account Suspension", description: "My account was suspended without reason", status: "Open"},
+                {id: 8, title: "Data Export", description: "Need to export my data", status: "Resolved"}
+            ],
+            "QABASS": [
+                {id: 9, title: "Mobile App Bug", description: "App crashes when opening messages", status: "Open"}
+            ],
+            "SARA": [
+                {id: 10, title: "Billing Issue", description: "Wrong amount charged on my card", status: "In Progress"},
+                {id: 11, title: "Feature Request", description: "Need dark mode option", status: "Open"}
+            ],
+            "AHMED": [
+                {id: 12, title: "Security Concern", description: "Suspicious activity on my account", status: "Resolved"}
+            ]
+        };
+        
+
+        let currentSelectedUser = "";
+        let currentSelectedComplaint = null;
+        const createUsersList = () => {
+            const usersList = document.getElementById("usersList");
+            usersList.innerHTML = ""; // Clear previous content
+            
+            // Heere i Create user items using map 
+            const userItems = ListOfUsers.map((userName) => {
+                let userElement = document.createElement("div");
+                userElement.className = "user-item";
+                userElement.textContent = userName;
+                
+                userElement.addEventListener("click", () => {
+                    selectUser(userName);
+                });
+                
+                return userElement;
+            });
+            
+            userItems.forEach((item) => {
+                usersList.appendChild(item);
+            });
+        };
+      
+        const selectUser = (userName) => {
+            currentSelectedUser = userName;
+            
+            updateUserSelection();
+            
+            showUserComplaints(userName);
+        };
+        
+        const updateUserSelection = () => {
+            const allUsers = document.querySelectorAll(".user-item");
+            
+            allUsers.forEach((userItem) => {
+            
+                userItem.classList.remove("selected");
+                
+                if (userItem.textContent === currentSelectedUser) {
+                    userItem.classList.add("selected");
+                }
+            });
+        };
+        
+        const showUserComplaints = (userName) => {
+            const complaintsList = document.getElementById("complaintsList");
+            complaintsList.innerHTML = ""; 
+            
+            const userComplaintsData = UserComplaints[userName] || [];
+            
+            if (userComplaintsData.length === 0) {
+                complaintsList.innerHTML = "<p>No complaints found for this user.</p>";
+                document.getElementById("complaintDetails").innerHTML = "No complaints to display.";
+                return;
+            }
+            
+            const complaintItems = userComplaintsData.map((complaint) => {
+                let complaintElement = document.createElement("div");
+                complaintElement.className = "complaint-item";
+                complaintElement.textContent = `${complaint.title} - [${complaint.status}]`;
+                
+                complaintElement.addEventListener("click", () => {
+                    selectComplaint(complaint);
+                });
+                
+                return complaintElement;
+            });
+            
+            complaintItems.forEach((item) => {
+                complaintsList.appendChild(item);
+            });
+            
+            if (userComplaintsData.length > 0) {
+                selectComplaint(userComplaintsData[0]);
+            }
+        };
+        
+        const selectComplaint = (complaint) => {
+            currentSelectedComplaint = complaint;
+            updateComplaintSelection();
+            showComplaintDetails(complaint);
+        };
+        
+        const updateComplaintSelection = () => {
+            const allComplaints = document.querySelectorAll(".complaint-item");
+            allComplaints.forEach((complaintItem) => {
+                complaintItem.classList.remove("selected");
+                if (currentSelectedComplaint && 
+                    complaintItem.textContent.includes(currentSelectedComplaint.title)) {
+                    complaintItem.classList.add("selected");
+                }
+            });
+        };
+      
+        const showComplaintDetails = (complaint) => {
+            const detailsArea = document.getElementById("complaintDetails");
+     
+            let detailsContent = `
+                <strong>Complaint ID:</strong> ${complaint.id}<br><br>
+                <strong>Title:</strong> ${complaint.title}<br><br>
+                <strong>Description:</strong> ${complaint.description}<br><br>
+                <strong>Status:</strong> <span style="color: ${getStatusColor(complaint.status)}; font-weight: bold;">${complaint.status}</span><br><br>
+                <strong>User:</strong> ${currentSelectedUser}
+            `;
+            
+            detailsArea.innerHTML = detailsContent;
+        };
+        
+        const getStatusColor = (status) => {
+            if (status === "Open") return "#dc3545";
+            if (status === "In Progress") return "#fd7e14";
+            if (status === "Resolved") return "#28a745";
+            return "#6c757d";
+        };
+        const initializeApp = () => {
+            
+            createUsersList();
+            
+           
+            if (ListOfUsers.length > 0) {
+                selectUser(ListOfUsers[0]);
+            }
+        };
+
+        document.addEventListener("DOMContentLoaded", initializeApp);
+        console.log("Users List:", ListOfUsers);
+        console.log("All Complaints Data:", UserComplaints);
\ No newline at end of file
diff --git a/examples_src/from_qais/listOfUsersComplin.html b/examples_src/from_qais/listOfUsersComplin.html
new file mode 100644
index 0000000..a034e91
--- /dev/null
+++ b/examples_src/from_qais/listOfUsersComplin.html
@@ -0,0 +1,333 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Complaints Management Mini System</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 24px;
+            padding: 32px;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        
+        .header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 8px;
+        }
+        
+        .header p {
+            color: #64748b;
+            font-size: 1.1rem;
+            font-weight: 400;
+        }
+        
+        .main-content {
+            display: flex;
+            gap: 32px;
+            min-height: 600px;
+        }
+        
+        .users-section {
+            flex: 1;
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 24px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        
+        .complaints-section {
+            flex: 2;
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 24px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        
+        .section-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: #1e293b;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .section-title::before {
+            content: '';
+            width: 4px;
+            height: 24px;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            border-radius: 2px;
+        }
+        
+        .user-item {
+            padding: 16px 20px;
+            margin: 8px 0;
+            border-radius: 16px;
+            cursor: pointer;
+            background: rgba(255, 255, 255, 0.8);
+            border: 2px solid transparent;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            font-weight: 500;
+            color: #334155;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .user-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+            transition: left 0.5s;
+        }
+        
+        .user-item:hover {
+            background: rgba(255, 255, 255, 0.9);
+            border-color: rgba(102, 126, 234, 0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
+        }
+        
+        .user-item:hover::before {
+            left: 100%;
+        }
+        
+        .user-item.selected {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
+        }
+        
+        .complaint-item {
+            padding: 16px 20px;
+            margin: 8px 0;
+            border-radius: 12px;
+            cursor: pointer;
+            background: rgba(255, 255, 255, 0.6);
+            border: 1px solid rgba(203, 213, 225, 0.5);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            color: #475569;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .complaint-item::after {
+            content: '';
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #e2e8f0;
+            transition: all 0.3s;
+        }
+        
+        .complaint-item:hover {
+            background: rgba(255, 255, 255, 0.8);
+            border-color: rgba(102, 126, 234, 0.3);
+            transform: translateX(4px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        .complaint-item:hover::after {
+            background: #667eea;
+        }
+        
+        .complaint-item.selected {
+            background: linear-gradient(135deg, #10b981, #059669);
+            color: white;
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateX(4px);
+            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
+        }
+        
+        .complaint-item.selected::after {
+            background: rgba(255, 255, 255, 0.8);
+        }
+        
+        .complaint-details {
+            margin-top: 24px;
+            padding: 24px;
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            min-height: 200px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .complaint-details::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #667eea, #764ba2, #10b981);
+            background-size: 200% 100%;
+            animation: gradientShift 3s ease infinite;
+        }
+        
+        @keyframes gradientShift {
+            0%, 100% { background-position: 0% 0%; }
+            50% { background-position: 100% 0%; }
+        }
+        
+        .complaint-details h4 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: #1e293b;
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .complaint-details h4::before {
+            content: '📋';
+            font-size: 1.2rem;
+        }
+        
+        .detail-content {
+            line-height: 1.6;
+            color: #475569;
+        }
+        
+        .status-badge {
+            display: inline-block;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.025em;
+        }
+        
+        .status-open {
+            background: rgba(239, 68, 68, 0.1);
+            color: #dc2626;
+            border: 1px solid rgba(239, 68, 68, 0.2);
+        }
+        
+        .status-progress {
+            background: rgba(245, 158, 11, 0.1);
+            color: #d97706;
+            border: 1px solid rgba(245, 158, 11, 0.2);
+        }
+        
+        .status-resolved {
+            background: rgba(16, 185, 129, 0.1);
+            color: #059669;
+            border: 1px solid rgba(16, 185, 129, 0.2);
+        }
+        
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .main-content {
+                flex-direction: column;
+                gap: 20px;
+            }
+            
+            .container {
+                padding: 20px;
+                margin: 10px;
+            }
+            
+            .header h1 {
+                font-size: 2rem;
+            }
+        }
+        
+        /* Scrollbar Styling */
+        .users-section::-webkit-scrollbar,
+        .complaints-section::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .users-section::-webkit-scrollbar-track,
+        .complaints-section::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 3px;
+        }
+        
+        .users-section::-webkit-scrollbar-thumb,
+        .complaints-section::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            border-radius: 3px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Support Admin - User Complaints Management</h1>
+        </div>
+        
+        <div class="main-content">
+            <!-- Users List Section -->
+            <div class="users-section">
+                <h3 class="section-title">Users List</h3>
+                <div id="usersList"></div>
+            </div>
+            
+            <!-- Complaints Section -->
+            <div class="complaints-section">
+                <h3 class="section-title">User Complaints</h3>
+                <div id="complaintsList"></div>
+                
+                <!-- Complaint Details Area -->
+                <div class="complaint-details">
+                    <h4>Complaint Details:</h4>
+                    <div id="complaintDetails">Select a complaint to view details...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+<script src="LissOfUComplien.js"></script> 
+
+</body>
+</html>
\ No newline at end of file

From 6922ac980d9adeaaaad62ac95b7bcdc0fedb0729 Mon Sep 17 00:00:00 2001
From: QAIS <19F19720@mec.edu.om>
Date: Sun, 6 Jul 2025 01:40:56 +0400
Subject: [PATCH 6/6] evaluation Task

---
 .../from_qais/EvaluationFinalTask/EVT.html    | 880 ++++++++++++++++++
 .../EvaluationFinalTask/Page2/Eval.js         | 283 ++++++
 .../Page1/EvaluationTask.css                  | 338 +++++++
 .../Page1/EvaluationTask.js                   | 234 +++++
 .../Page1/evaluationTask.html                 | 168 ++++
 5 files changed, 1903 insertions(+)
 create mode 100644 examples_src/from_qais/EvaluationFinalTask/EVT.html
 create mode 100644 examples_src/from_qais/EvaluationFinalTask/Page2/Eval.js
 create mode 100644 examples_src/from_qais/EvalutionFinalTask/Page1/EvaluationTask.css
 create mode 100644 examples_src/from_qais/EvalutionFinalTask/Page1/EvaluationTask.js
 create mode 100644 examples_src/from_qais/EvalutionFinalTask/Page1/evaluationTask.html

diff --git a/examples_src/from_qais/EvaluationFinalTask/EVT.html b/examples_src/from_qais/EvaluationFinalTask/EVT.html
new file mode 100644
index 0000000..47106c3
--- /dev/null
+++ b/examples_src/from_qais/EvaluationFinalTask/EVT.html
@@ -0,0 +1,880 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Complaint Management System</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
+    <style>
+
+ * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 30px;
+            margin-bottom: 30px;
+            text-align: center;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .header h1 {
+            color: white;
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+
+        .header p {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 1.1em;
+        }
+
+        .filters-section {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 25px;
+            margin-bottom: 30px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+
+        .filters-section h2 {
+            color: #333;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .filter-controls {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+            align-items: end;
+        }
+
+        .filter-group {
+            flex: 1;
+            min-width: 200px;
+        }
+
+        .filter-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #555;
+        }
+
+        .filter-group input,
+        .filter-group select {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            background: white;
+        }
+
+        .filter-group input:focus,
+        .filter-group select:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .complaints-section {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 30px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+
+        .complaints-section h2 {
+            color: #333;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 10px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            text-decoration: none;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            white-space: nowrap;
+        }
+
+        .btn-primary {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+        }
+
+        .btn-success {
+            background: linear-gradient(45deg, #4CAF50, #45a049);
+            color: white;
+        }
+
+        .btn-success:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(76, 175, 80, 0.3);
+        }
+
+        .btn-danger {
+            background: linear-gradient(45deg, #f44336, #d32f2f);
+            color: white;
+        }
+
+        .btn-danger:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(244, 67, 54, 0.3);
+        }
+
+        .btn-warning {
+            background: linear-gradient(45deg, #ff9800, #f57c00);
+            color: white;
+        }
+
+        .btn-warning:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(255, 152, 0, 0.3);
+        }
+
+        .btn-secondary {
+            background: linear-gradient(45deg, #6c757d, #5a6268);
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(108, 117, 125, 0.3);
+        }
+
+        .complaints-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            background: white;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .complaints-table th,
+        .complaints-table td {
+            padding: 15px;
+            text-align: left;
+            border-bottom: 1px solid #e1e5e9;
+        }
+
+        .complaints-table th {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            font-weight: 600;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        .complaints-table tr:hover {
+            background-color: #f8f9fa;
+        }
+
+        .status-badge {
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.85em;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .status-open {
+            background: #e3f2fd;
+            color: #1976d2;
+        }
+
+        .status-in-progress {
+            background: #fff3e0;
+            color: #f57c00;
+        }
+
+        .status-resolved {
+            background: #e8f5e8;
+            color: #388e3c;
+        }
+
+        .status-closed {
+            background: #f3e5f5;
+            color: #7b1fa2;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(5px);
+        }
+
+        .modal-content {
+            background-color: white;
+            margin: 2% auto;
+            padding: 30px;
+            border-radius: 20px;
+            width: 90%;
+            max-width: 600px;
+            position: relative;
+            animation: modalFadeIn 0.3s ease;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: scale(0.8); }
+            to { opacity: 1; transform: scale(1); }
+        }
+
+        .close {
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+            color: #aaa;
+            transition: color 0.3s ease;
+        }
+
+        .close:hover {
+            color: #667eea;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #555;
+        }
+
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            background: white;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus,
+        .form-group textarea:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .form-group textarea {
+            resize: vertical;
+            min-height: 120px;
+        }
+
+        .form-row {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+
+        .form-row .form-group {
+            flex: 1;
+            min-width: 250px;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: #667eea;
+        }
+
+        .loading i {
+            font-size: 2em;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .alert {
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 10px;
+            font-weight: 500;
+        }
+
+        .alert-success {
+            background-color: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+
+        .alert-error {
+            background-color: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+
+        .no-results {
+            text-align: center;
+            padding: 40px;
+            color: #666;
+        }
+
+        .no-results i {
+            font-size: 3em;
+            color: #ddd;
+            margin-bottom: 15px;
+        }
+
+        .results-count {
+            margin-bottom: 15px;
+            font-weight: 600;
+            color: #666;
+        }
+
+        .user-info {
+            font-size: 0.9em;
+            color: #666;
+            margin-top: 5px;
+        }
+
+        .complaint-description {
+            max-width: 300px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .complaint-description:hover {
+            white-space: normal;
+            overflow: visible;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+
+            .filter-controls {
+                flex-direction: column;
+            }
+
+            .filter-group {
+                min-width: auto;
+            }
+
+            .form-row {
+                flex-direction: column;
+            }
+
+            .form-row .form-group {
+                min-width: auto;
+            }
+
+            .complaints-table {
+                font-size: 14px;
+            }
+
+            .complaints-table th,
+            .complaints-table td {
+                padding: 10px 8px;
+            }
+
+            .btn {
+                font-size: 14px;
+                padding: 10px 16px;
+            }
+        }
+
+    </style>
+  
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1><i class="fas fa-clipboard-check"></i> Complaint Management System</h1>
+            <p>Manage and track customer complaints efficiently</p>
+        </div>
+
+        <!-- Filters Section -->
+        <div class="filters-section">
+            <h2><i class="fas fa-filter"></i> Filter Complaints</h2>
+            <div class="filter-controls">
+                <div class="filter-group">
+                    <label for="filter-user">Filter by User</label>
+                    <select id="filter-user">
+                        <option value="">All Users</option>
+                    </select>
+                </div>
+                <div class="filter-group">
+                    <label for="filter-title">Search by Title</label>
+                    <input type="text" id="filter-title" placeholder="Enter complaint title...">
+                </div>
+                <div class="filter-group">
+                    <label for="filter-status">Filter by Status</label>
+                    <select id="filter-status">
+                        <option value="">All Statuses</option>
+                        <option value="open">Open</option>
+                        <option value="in-progress">In Progress</option>
+                        <option value="resolved">Resolved</option>
+                        <option value="closed">Closed</option>
+                    </select>
+                </div>
+                <div class="filter-group">
+                    <label>&nbsp;</label>
+                    <button class="btn btn-secondary" id="clear-filters">
+                        <i class="fas fa-times"></i> Clear Filters
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Complaints Section -->
+        <div class="complaints-section">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                <h2><i class="fas fa-clipboard-list"></i> All Complaints</h2>
+                <button class="btn btn-primary" id="refresh-complaints">
+                    <i class="fas fa-refresh"></i> Refresh
+                </button>
+            </div>
+            
+            <div id="complaints-loading" class="loading">
+                <i class="fas fa-spinner"></i>
+                <p>Loading complaints...</p>
+            </div>
+
+            <div id="complaints-content" style="display: none;">
+                <div id="results-count" class="results-count"></div>
+                <div id="complaints-table-container">
+                    <table class="complaints-table">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>User</th>
+                                <th>Title</th>
+                                <th>Description</th>
+                                <th>Status</th>
+                                <th>Created</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="complaints-tbody">
+                        </tbody>
+                    </table>
+                </div>
+                <div id="no-results" class="no-results" style="display: none;">
+                    <i class="fas fa-search"></i>
+                    <h3>No complaints found</h3>
+                    <p>Try adjusting your filters or search criteria.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="edit-complaint-modal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h3><i class="fas fa-edit"></i> Edit Complaint</h3>
+            <div id="edit-complaint-alert"></div>
+            <form id="edit-complaint-form">
+                <input type="hidden" id="edit-complaint-id">
+                <div class="form-group">
+                    <label for="edit-complaint-user">User</label>
+                    <select id="edit-complaint-user" required>
+                        <option value="">Select User</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="edit-complaint-title">Complaint Title</label>
+                    <input type="text" id="edit-complaint-title" required>
+                </div>
+                <div class="form-group">
+                    <label for="edit-complaint-description">Description</label>
+                    <textarea id="edit-complaint-description" required></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="edit-complaint-status">Status</label>
+                    <select id="edit-complaint-status" required>
+                        <option value="open">Open</option>
+                        <option value="in-progress">In Progress</option>
+                        <option value="resolved">Resolved</option>
+                        <option value="closed">Closed</option>
+                    </select>
+                </div>
+                <div style="margin-top: 20px;">
+                    <button type="submit" class="btn btn-success">
+                        <i class="fas fa-save"></i> Update Complaint
+                    </button>
+                    <button type="button" class="btn btn-secondary" onclick="$('#edit-complaint-modal').hide()">
+                        <i class="fas fa-times"></i> Cancel
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div id="delete-complaint-modal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h3><i class="fas fa-exclamation-triangle"></i> Confirm Delete</h3>
+            <p>Are you sure you want to delete this complaint? This action cannot be undone.</p>
+            <div style="margin-top: 20px;">
+                <button id="confirm-delete-complaint" class="btn btn-danger">
+                    <i class="fas fa-trash"></i> Delete Complaint
+                </button>
+                <button id="cancel-delete-complaint" class="btn btn-secondary">
+                    <i class="fas fa-times"></i> Cancel
+                </button>
+            </div>
+        </div>
+    </div>
+
+   <script>
+
+     const API_BASE_URL = 'http://localhost:9999';
+        let allComplaints = [];
+        let allUsers = [];
+        let filteredComplaints = [];
+        let complaintToDelete = null;
+
+        // Initialize the application
+        $(document).ready(function() {
+            loadUsers();
+            loadComplaints();
+            setupEventListeners();
+        });
+
+        // Setup event listeners
+        function setupEventListeners() {
+            // Filter controls
+            $('#filter-user, #filter-status').change(function() {
+                applyFilters();
+            });
+
+            $('#filter-title').on('input', function() {
+                applyFilters();
+            });
+
+            $('#clear-filters').click(function() {
+                clearFilters();
+            });
+
+            $('#refresh-complaints').click(function() {
+                loadComplaints();
+            });
+
+            // Edit complaint form
+            $('#edit-complaint-form').submit(function(e) {
+                e.preventDefault();
+                updateComplaint();
+            });
+
+            // Modal controls
+            $('.close').click(function() {
+                $(this).closest('.modal').hide();
+            });
+
+            $('#cancel-delete-complaint').click(function() {
+                $('#delete-complaint-modal').hide();
+            });
+
+            $('#confirm-delete-complaint').click(function() {
+                deleteComplaint(complaintToDelete);
+                $('#delete-complaint-modal').hide();
+            });
+
+            // Close modal when clicking outside
+            $(window).click(function(e) {
+                if ($(e.target).hasClass('modal')) {
+                    $('.modal').hide();
+                }
+            });
+        }
+
+        // Load all users
+        function loadUsers() {
+            $.ajax({
+                url: `${API_BASE_URL}/users`,
+                method: 'GET',
+                success: function(data) {
+                    allUsers = data;
+                    populateUserDropdowns();
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error loading users:', error);
+                }
+            });
+        }
+
+        // Populate user dropdowns
+        function populateUserDropdowns() {
+            const filterSelect = $('#filter-user');
+            const editSelect = $('#edit-complaint-user');
+            
+            filterSelect.find('option:not(:first)').remove();
+            editSelect.find('option:not(:first)').remove();
+            
+            allUsers.forEach(user => {
+                const option = `<option value="${user.id}">${user.name} (${user.email})</option>`;
+                filterSelect.append(option);
+                editSelect.append(option);
+            });
+        }
+
+        // Load all complaints
+        function loadComplaints() {
+            $('#complaints-loading').show();
+            $('#complaints-content').hide();
+            
+            $.ajax({
+                url: `${API_BASE_URL}/complaints`,
+                method: 'GET',
+                success: function(data) {
+                    allComplaints = data;
+                    filteredComplaints = data;
+                    displayComplaints(data);
+                    updateResultsCount(data.length);
+                    $('#complaints-loading').hide();
+                    $('#complaints-content').show();
+                },
+                error: function(xhr, status, error) {
+                    $('#complaints-loading').hide();
+                    showAlert('complaints-content', 'Error loading complaints: ' + error, 'error');
+                }
+            });
+        }
+
+        // Display complaints in table
+        function displayComplaints(complaints) {
+            const tbody = $('#complaints-tbody');
+            tbody.empty();
+            
+            if (complaints.length === 0) {
+                $('#complaints-table-container').hide();
+                $('#no-results').show();
+                return;
+            }
+
+            $('#complaints-table-container').show();
+            $('#no-results').hide();
+            
+            complaints.forEach(complaint => {
+                const user = allUsers.find(u => u.id === complaint.userId);
+                const userName = user ? user.name : 'Unknown User';
+                const userEmail = user ? user.email : '';
+                const userPhone = user ? user.phone : '';
+                
+                const createdDate = new Date(complaint.createdAt).toLocaleDateString();
+                const statusClass = `status-${complaint.status.replace(' ', '-')}`;
+                
+                const row = `
+                    <tr>
+                        <td>${complaint.id}</td>
+                        <td>
+                            <strong>${userName}</strong>
+                            <div class="user-info">
+                                <i class="fas fa-envelope"></i> ${userEmail}<br>
+                                <i class="fas fa-phone"></i> ${userPhone}
+                            </div>
+                        </td>
+                        <td><strong>${complaint.title}</strong></td>
+                        <td>
+                            <div class="complaint-description" title="${complaint.description}">
+                                ${complaint.description}
+                            </div>
+                        </td>
+                        <td>
+                            <span class="status-badge ${statusClass}">
+                                ${complaint.status}
+                            </span>
+                        </td>
+                        <td>${createdDate}</td>
+                        <td>
+                            <button class="btn btn-warning" onclick="editComplaint(${complaint.id})">
+                                <i class="fas fa-edit"></i> Edit
+                            </button>
+                            <button class="btn btn-danger" onclick="confirmDeleteComplaint(${complaint.id})">
+                                <i class="fas fa-trash"></i> Delete
+                            </button>
+                        </td>
+                    </tr>
+                `;
+                tbody.append(row);
+            });
+        }
+
+        // Apply filters
+        function applyFilters() {
+            const userFilter = $('#filter-user').val();
+            const titleFilter = $('#filter-title').val().toLowerCase();
+            const statusFilter = $('#filter-status').val();
+            
+            filteredComplaints = allComplaints.filter(complaint => {
+                const matchesUser = !userFilter || complaint.userId == userFilter;
+                const matchesTitle = !titleFilter || complaint.title.toLowerCase().includes(titleFilter);
+                const matchesStatus = !statusFilter || complaint.status === statusFilter;
+                
+                return matchesUser && matchesTitle && matchesStatus;
+            });
+            
+            displayComplaints(filteredComplaints);
+            updateResultsCount(filteredComplaints.length);
+        }
+
+        // Clear all filters
+        function clearFilters() {
+            $('#filter-user').val('');
+            $('#filter-title').val('');
+            $('#filter-status').val('');
+            filteredComplaints = allComplaints;
+            displayComplaints(filteredComplaints);
+            updateResultsCount(filteredComplaints.length);
+        }
+
+        // Update results count
+        function updateResultsCount(count) {
+            const total = allComplaints.length;
+            const countText = count === total ? 
+                `Showing all ${total} complaints` : 
+                `Showing ${count} of ${total} complaints`;
+            $('#results-count').text(countText);
+        }
+
+        // Edit complaint
+        function editComplaint(complaintId) {
+            const complaint = allComplaints.find(c => c.id === complaintId);
+            if (complaint) {
+                $('#edit-complaint-id').val(complaint.id);
+                $('#edit-complaint-user').val(complaint.userId);
+                $('#edit-complaint-title').val(complaint.title);
+                $('#edit-complaint-description').val(complaint.description);
+                $('#edit-complaint-status').val(complaint.status);
+                $('#edit-complaint-modal').show();
+            }
+        }
+
+        // Update complaint
+        function updateComplaint() {
+            const complaintId = $('#edit-complaint-id').val();
+            const formData = {
+                userId: parseInt($('#edit-complaint-user').val()),
+                title: $('#edit-complaint-title').val(),
+                description: $('#edit-complaint-description').val(),
+                status: $('#edit-complaint-status').val()
+            };
+
+            $.ajax({
+                url: `${API_BASE_URL}/complaints/${complaintId}`,
+                method: 'PUT',
+                contentType: 'application/json',
+                data: JSON.stringify(formData),
+                success: function(data) {
+                    showAlert('edit-complaint-alert', 'Complaint updated successfully!', 'success');
+                    setTimeout(() => {
+                        $('#edit-complaint-modal').hide();
+                        loadComplaints();
+                    }, 1500);
+                },
+                error: function(xhr, status, error) {
+                    showAlert('edit-complaint-alert', 'Error updating complaint: ' + error, 'error');
+                }
+            });
+        }
+
+        // Confirm delete complaint
+        function confirmDeleteComplaint(complaintId) {
+            complaintToDelete = complaintId;
+            $('#delete-complaint-modal').show();
+        }
+
+        // Delete complaint
+        function deleteComplaint(complaintId) {
+            $.ajax({
+                url: `${API_BASE_URL}/complaints/${complaintId}`,
+                method: 'DELETE',
+                success: function(data) {
+                    loadComplaints();
+                    showAlert('complaints-content', 'Complaint deleted successfully!', 'success');
+                },
+                error: function(xhr, status, error) {
+                    showAlert('complaints-content', 'Error deleting complaint: ' + error, 'error');
+                }
+            });
+        }
+
+        // Show alert message
+        function showAlert(containerId, message, type) {
+            const alertClass = type === 'success' ? 'alert-success' : 'alert-error';
+            const alertHtml = `<div class="alert ${alertClass}">${message}</div>`;
+            
+            $(`#${containerId}`).html(alertHtml);
+            
+            // Auto-hide after 5 seconds
+            setTimeout(() => {
+                $(`#${containerId}`).empty();
+            }, 5000);
+        }
+   </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples_src/from_qais/EvaluationFinalTask/Page2/Eval.js b/examples_src/from_qais/EvaluationFinalTask/Page2/Eval.js
new file mode 100644
index 0000000..112622a
--- /dev/null
+++ b/examples_src/from_qais/EvaluationFinalTask/Page2/Eval.js
@@ -0,0 +1,283 @@
+ const API_BASE_URL = 'http://localhost:9999';
+        let allComplaints = [];
+        let allUsers = [];
+        let filteredComplaints = [];
+        let complaintToDelete = null;
+
+        // Initialize the application
+        $(document).ready(function() {
+            loadUsers();
+            loadComplaints();
+            setupEventListeners();
+        });
+
+        // Setup event listeners
+        function setupEventListeners() {
+            // Filter controls
+            $('#filter-user, #filter-status').change(function() {
+                applyFilters();
+            });
+
+            $('#filter-title').on('input', function() {
+                applyFilters();
+            });
+
+            $('#clear-filters').click(function() {
+                clearFilters();
+            });
+
+            $('#refresh-complaints').click(function() {
+                loadComplaints();
+            });
+
+            // Edit complaint form
+            $('#edit-complaint-form').submit(function(e) {
+                e.preventDefault();
+                updateComplaint();
+            });
+
+            // Modal controls
+            $('.close').click(function() {
+                $(this).closest('.modal').hide();
+            });
+
+            $('#cancel-delete-complaint').click(function() {
+                $('#delete-complaint-modal').hide();
+            });
+
+            $('#confirm-delete-complaint').click(function() {
+                deleteComplaint(complaintToDelete);
+                $('#delete-complaint-modal').hide();
+            });
+
+            // Close modal when clicking outside
+            $(window).click(function(e) {
+                if ($(e.target).hasClass('modal')) {
+                    $('.modal').hide();
+                }
+            });
+        }
+
+        // Load all users
+        function loadUsers() {
+            $.ajax({
+                url: `${API_BASE_URL}/users`,
+                method: 'GET',
+                success: function(data) {
+                    allUsers = data;
+                    populateUserDropdowns();
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error loading users:', error);
+                }
+            });
+        }
+
+        // Populate user dropdowns
+        function populateUserDropdowns() {
+            const filterSelect = $('#filter-user');
+            const editSelect = $('#edit-complaint-user');
+            
+            filterSelect.find('option:not(:first)').remove();
+            editSelect.find('option:not(:first)').remove();
+            
+            allUsers.forEach(user => {
+                const option = `<option value="${user.id}">${user.name} (${user.email})</option>`;
+                filterSelect.append(option);
+                editSelect.append(option);
+            });
+        }
+
+        // Load all complaints
+        function loadComplaints() {
+            $('#complaints-loading').show();
+            $('#complaints-content').hide();
+            
+            $.ajax({
+                url: `${API_BASE_URL}/complaints`,
+                method: 'GET',
+                success: function(data) {
+                    allComplaints = data;
+                    filteredComplaints = data;
+                    displayComplaints(data);
+                    updateResultsCount(data.length);
+                    $('#complaints-loading').hide();
+                    $('#complaints-content').show();
+                },
+                error: function(xhr, status, error) {
+                    $('#complaints-loading').hide();
+                    showAlert('complaints-content', 'Error loading complaints: ' + error, 'error');
+                }
+            });
+        }
+
+        // Display complaints in table
+        function displayComplaints(complaints) {
+            const tbody = $('#complaints-tbody');
+            tbody.empty();
+            
+            if (complaints.length === 0) {
+                $('#complaints-table-container').hide();
+                $('#no-results').show();
+                return;
+            }
+
+            $('#complaints-table-container').show();
+            $('#no-results').hide();
+            
+            complaints.forEach(complaint => {
+                const user = allUsers.find(u => u.id === complaint.userId);
+                const userName = user ? user.name : 'Unknown User';
+                const userEmail = user ? user.email : '';
+                const userPhone = user ? user.phone : '';
+                
+                const createdDate = new Date(complaint.createdAt).toLocaleDateString();
+                const statusClass = `status-${complaint.status.replace(' ', '-')}`;
+                
+                const row = `
+                    <tr>
+                        <td>${complaint.id}</td>
+                        <td>
+                            <strong>${userName}</strong>
+                            <div class="user-info">
+                                <i class="fas fa-envelope"></i> ${userEmail}<br>
+                                <i class="fas fa-phone"></i> ${userPhone}
+                            </div>
+                        </td>
+                        <td><strong>${complaint.title}</strong></td>
+                        <td>
+                            <div class="complaint-description" title="${complaint.description}">
+                                ${complaint.description}
+                            </div>
+                        </td>
+                        <td>
+                            <span class="status-badge ${statusClass}">
+                                ${complaint.status}
+                            </span>
+                        </td>
+                        <td>${createdDate}</td>
+                        <td>
+                            <button class="btn btn-warning" onclick="editComplaint(${complaint.id})">
+                                <i class="fas fa-edit"></i> Edit
+                            </button>
+                            <button class="btn btn-danger" onclick="confirmDeleteComplaint(${complaint.id})">
+                                <i class="fas fa-trash"></i> Delete
+                            </button>
+                        </td>
+                    </tr>
+                `;
+                tbody.append(row);
+            });
+        }
+
+        // Apply filters
+        function applyFilters() {
+            const userFilter = $('#filter-user').val();
+            const titleFilter = $('#filter-title').val().toLowerCase();
+            const statusFilter = $('#filter-status').val();
+            
+            filteredComplaints = allComplaints.filter(complaint => {
+                const matchesUser = !userFilter || complaint.userId == userFilter;
+                const matchesTitle = !titleFilter || complaint.title.toLowerCase().includes(titleFilter);
+                const matchesStatus = !statusFilter || complaint.status === statusFilter;
+                
+                return matchesUser && matchesTitle && matchesStatus;
+            });
+            
+            displayComplaints(filteredComplaints);
+            updateResultsCount(filteredComplaints.length);
+        }
+
+        // Clear all filters
+        function clearFilters() {
+            $('#filter-user').val('');
+            $('#filter-title').val('');
+            $('#filter-status').val('');
+            filteredComplaints = allComplaints;
+            displayComplaints(filteredComplaints);
+            updateResultsCount(filteredComplaints.length);
+        }
+
+        // Update results count
+        function updateResultsCount(count) {
+            const total = allComplaints.length;
+            const countText = count === total ? 
+                `Showing all ${total} complaints` : 
+                `Showing ${count} of ${total} complaints`;
+            $('#results-count').text(countText);
+        }
+
+        // Edit complaint
+        function editComplaint(complaintId) {
+            const complaint = allComplaints.find(c => c.id === complaintId);
+            if (complaint) {
+                $('#edit-complaint-id').val(complaint.id);
+                $('#edit-complaint-user').val(complaint.userId);
+                $('#edit-complaint-title').val(complaint.title);
+                $('#edit-complaint-description').val(complaint.description);
+                $('#edit-complaint-status').val(complaint.status);
+                $('#edit-complaint-modal').show();
+            }
+        }
+
+        // Update complaint
+        function updateComplaint() {
+            const complaintId = $('#edit-complaint-id').val();
+            const formData = {
+                userId: parseInt($('#edit-complaint-user').val()),
+                title: $('#edit-complaint-title').val(),
+                description: $('#edit-complaint-description').val(),
+                status: $('#edit-complaint-status').val()
+            };
+
+            $.ajax({
+                url: `${API_BASE_URL}/complaints/${complaintId}`,
+                method: 'PUT',
+                contentType: 'application/json',
+                data: JSON.stringify(formData),
+                success: function(data) {
+                    showAlert('edit-complaint-alert', 'Complaint updated successfully!', 'success');
+                    setTimeout(() => {
+                        $('#edit-complaint-modal').hide();
+                        loadComplaints();
+                    }, 1500);
+                },
+                error: function(xhr, status, error) {
+                    showAlert('edit-complaint-alert', 'Error updating complaint: ' + error, 'error');
+                }
+            });
+        }
+
+        // Confirm delete complaint
+        function confirmDeleteComplaint(complaintId) {
+            complaintToDelete = complaintId;
+            $('#delete-complaint-modal').show();
+        }
+
+        // Delete complaint
+        function deleteComplaint(complaintId) {
+            $.ajax({
+                url: `${API_BASE_URL}/complaints/${complaintId}`,
+                method: 'DELETE',
+                success: function(data) {
+                    loadComplaints();
+                    showAlert('complaints-content', 'Complaint deleted successfully!', 'success');
+                },
+                error: function(xhr, status, error) {
+                    showAlert('complaints-content', 'Error deleting complaint: ' + error, 'error');
+                }
+            });
+        }
+
+        // Show alert message
+        function showAlert(containerId, message, type) {
+            const alertClass = type === 'success' ? 'alert-success' : 'alert-error';
+            const alertHtml = `<div class="alert ${alertClass}">${message}</div>`;
+            
+            $(`#${containerId}`).html(alertHtml);
+            
+            // Auto-hide after 5 seconds
+            setTimeout(() => {
+                $(`#${containerId}`).empty();
+            }, 5000);
+        }
\ No newline at end of file
diff --git a/examples_src/from_qais/EvalutionFinalTask/Page1/EvaluationTask.css b/examples_src/from_qais/EvalutionFinalTask/Page1/EvaluationTask.css
new file mode 100644
index 0000000..9b57f8c
--- /dev/null
+++ b/examples_src/from_qais/EvalutionFinalTask/Page1/EvaluationTask.css
@@ -0,0 +1,338 @@
+  * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 30px;
+            margin-bottom: 30px;
+            text-align: center;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .header h1 {
+            color: white;
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+
+        .header p {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 1.1em;
+        }
+
+        .nav-tabs {
+            display: flex;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 10px;
+            margin-bottom: 30px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .nav-tab {
+            flex: 1;
+            min-width: 120px;
+            padding: 15px 20px;
+            background: transparent;
+            border: none;
+            color: white;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 1em;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .nav-tab:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-2px);
+        }
+
+        .nav-tab.active {
+            background: rgba(255, 255, 255, 0.3);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+
+        .tab-content {
+            display: none;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 30px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+
+        .tab-content.active {
+            display: block;
+            animation: fadeIn 0.5s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #555;
+        }
+
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            background: white;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus,
+        .form-group textarea:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .form-group textarea {
+            resize: vertical;
+            min-height: 100px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 10px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            text-decoration: none;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+        }
+
+        .btn-success {
+            background: linear-gradient(45deg, #4CAF50, #45a049);
+            color: white;
+        }
+
+        .btn-success:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(76, 175, 80, 0.3);
+        }
+
+        .btn-danger {
+            background: linear-gradient(45deg, #f44336, #d32f2f);
+            color: white;
+        }
+
+        .btn-danger:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(244, 67, 54, 0.3);
+        }
+
+        .btn-warning {
+            background: linear-gradient(45deg, #ff9800, #f57c00);
+            color: white;
+        }
+
+        .btn-warning:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(255, 152, 0, 0.3);
+        }
+
+        .users-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            background: white;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .users-table th,
+        .users-table td {
+            padding: 15px;
+            text-align: left;
+            border-bottom: 1px solid #e1e5e9;
+        }
+
+        .users-table th {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            font-weight: 600;
+        }
+
+        .users-table tr:hover {
+            background-color: #f8f9fa;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(5px);
+        }
+
+        .modal-content {
+            background-color: white;
+            margin: 5% auto;
+            padding: 30px;
+            border-radius: 20px;
+            width: 90%;
+            max-width: 500px;
+            position: relative;
+            animation: modalFadeIn 0.3s ease;
+        }
+
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: scale(0.8); }
+            to { opacity: 1; transform: scale(1); }
+        }
+
+        .close {
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+            color: #aaa;
+            transition: color 0.3s ease;
+        }
+
+        .close:hover {
+            color: #667eea;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: #667eea;
+        }
+
+        .loading i {
+            font-size: 2em;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .alert {
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 10px;
+            font-weight: 500;
+        }
+
+        .alert-success {
+            background-color: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+
+        .alert-error {
+            background-color: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+
+        .form-row {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+
+        .form-row .form-group {
+            flex: 1;
+            min-width: 250px;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+
+            .nav-tabs {
+                flex-direction: column;
+            }
+
+            .nav-tab {
+                min-width: auto;
+            }
+
+            .form-row {
+                flex-direction: column;
+            }
+
+            .form-row .form-group {
+                min-width: auto;
+            }
+
+            .users-table {
+                font-size: 14px;
+            }
+
+            .users-table th,
+            .users-table td {
+                padding: 10px 8px;
+            }
+        }
diff --git a/examples_src/from_qais/EvalutionFinalTask/Page1/EvaluationTask.js b/examples_src/from_qais/EvalutionFinalTask/Page1/EvaluationTask.js
new file mode 100644
index 0000000..9b76d88
--- /dev/null
+++ b/examples_src/from_qais/EvalutionFinalTask/Page1/EvaluationTask.js
@@ -0,0 +1,234 @@
+     const API_BASE_URL = 'http://localhost:9999';
+        let currentUsers = [];
+        let userToDelete = null;
+
+        $(document).ready(function() {
+            loadUsers();
+            loadUsersForComplaint();
+            setupEventListeners();
+        });
+
+        function setupEventListeners() {
+            // Tab navigation
+            $('.nav-tab').click(function() {
+                $('.nav-tab').removeClass('active');
+                $('.tab-content').removeClass('active');
+                $(this).addClass('active');
+                $('#' + $(this).data('tab')).addClass('active');
+            });
+
+            $('#add-user-form').submit(function(e) {
+                e.preventDefault();
+                addUser();
+            });
+
+            $('#edit-user-form').submit(function(e) {
+                e.preventDefault();
+                updateUser();
+            });
+
+            $('#complaint-form').submit(function(e) {
+                e.preventDefault();
+                submitComplaint();
+            });
+
+            $('.close').click(function() {
+                $(this).closest('.modal').hide();
+            });
+
+            $('#cancel-delete').click(function() {
+                $('#delete-modal').hide();
+            });
+
+            $('#confirm-delete').click(function() {
+                deleteUser(userToDelete);
+                $('#delete-modal').hide();
+            });
+
+            $(window).click(function(e) {
+                if ($(e.target).hasClass('modal')) {
+                    $('.modal').hide();
+                }
+            });
+        }
+
+        function loadUsers() {
+            $('#users-loading').show();
+            $('#users-content').hide();
+            
+            $.ajax({
+                url: `${API_BASE_URL}/users`,
+                method: 'GET',
+                success: function(data) {
+                    currentUsers = data;
+                    displayUsers(data);
+                    $('#users-loading').hide();
+                    $('#users-content').show();
+                },
+                error: function(xhr, status, error) {
+                    $('#users-loading').hide();
+                    showAlert('users-content', 'Error loading users: ' + error, 'error');
+                }
+            });
+        }
+
+        function displayUsers(users) {
+            const tbody = $('#users-tbody');
+            tbody.empty();
+            
+            users.forEach(user => {
+                const row = `
+                    <tr>
+                        <td>${user.id}</td>
+                        <td>${user.name}</td>
+                        <td>${user.email}</td>
+                        <td>${user.phone}</td>
+                        <td>
+                            <button class="btn btn-warning" onclick="editUser(${user.id})">
+                                <i class="fas fa-edit"></i> Edit
+                            </button>
+                            <button class="btn btn-danger" onclick="confirmDelete(${user.id})">
+                                <i class="fas fa-trash"></i> Delete
+                            </button>
+                        </td>
+                    </tr>
+                `;
+                tbody.append(row);
+            });
+        }
+
+        function addUser() {
+            const formData = {
+                name: $('#user-name').val(),
+                email: $('#user-email').val(),
+                phone: $('#user-phone').val(),
+                address: $('#user-address').val()
+            };
+
+            $.ajax({
+                url: `${API_BASE_URL}/users`,
+                method: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify(formData),
+                success: function(data) {
+                    showAlert('add-user-alert', 'User added successfully!', 'success');
+                    $('#add-user-form')[0].reset();
+                    loadUsers();
+                    loadUsersForComplaint();
+                },
+                error: function(xhr, status, error) {
+                    showAlert('add-user-alert', 'Error adding user: ' + error, 'error');
+                }
+            });
+        }
+
+        function editUser(userId) {
+            const user = currentUsers.find(u => u.id === userId);
+            if (user) {
+                $('#edit-user-id').val(user.id);
+                $('#edit-user-name').val(user.name);
+                $('#edit-user-email').val(user.email);
+                $('#edit-user-phone').val(user.phone);
+                $('#edit-user-address').val(user.address);
+                $('#edit-user-modal').show();
+            }
+        }
+
+        function updateUser() {
+            const userId = $('#edit-user-id').val();
+            const formData = {
+                name: $('#edit-user-name').val(),
+                email: $('#edit-user-email').val(),
+                phone: $('#edit-user-phone').val(),
+                address: $('#edit-user-address').val()
+            };
+
+            $.ajax({
+                url: `${API_BASE_URL}/users/${userId}`,
+                method: 'PUT',
+                contentType: 'application/json',
+                data: JSON.stringify(formData),
+                success: function(data) {
+                    showAlert('edit-user-alert', 'User updated successfully!', 'success');
+                    setTimeout(() => {
+                        $('#edit-user-modal').hide();
+                        loadUsers();
+                        loadUsersForComplaint();
+                    }, 1500);
+                },
+                error: function(xhr, status, error) {
+                    showAlert('edit-user-alert', 'Error updating user: ' + error, 'error');
+                }
+            });
+        }
+
+        function confirmDelete(userId) {
+            userToDelete = userId;
+            $('#delete-modal').show();
+        }
+
+        function deleteUser(userId) {
+            $.ajax({
+                url: `${API_BASE_URL}/users/${userId}`,
+                method: 'DELETE',
+                success: function(data) {
+                    loadUsers();
+                    loadUsersForComplaint();
+                    showAlert('users-content', 'User deleted successfully!', 'success');
+                },
+                error: function(xhr, status, error) {
+                    showAlert('users-content', 'Error deleting user: ' + error, 'error');
+                }
+            });
+        }
+
+        function loadUsersForComplaint() {
+            $.ajax({
+                url: `${API_BASE_URL}/users`,
+                method: 'GET',
+                success: function(data) {
+                    const select = $('#complaint-user');
+                    select.find('option:not(:first)').remove();
+                    
+                    data.forEach(user => {
+                        select.append(`<option value="${user.id}">${user.name} (${user.email})</option>`);
+                    });
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error loading users for complaint:', error);
+                }
+            });
+        }
+        function submitComplaint() {
+            const formData = {
+                userId: parseInt($('#complaint-user').val()),
+                title: $('#complaint-title').val(),
+                description: $('#complaint-description').val(),
+                status: $('#complaint-status').val()
+            };
+
+            $.ajax({
+                url: `${API_BASE_URL}/complaints`,
+                method: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify(formData),
+                success: function(data) {
+                    showAlert('complaint-alert', 'Complaint submitted successfully!', 'success');
+                    $('#complaint-form')[0].reset();
+                },
+                error: function(xhr, status, error) {
+                    showAlert('complaint-alert', 'Error submitting complaint: ' + error, 'error');
+                }
+            });
+        }
+
+        function showAlert(containerId, message, type) {
+            const alertClass = type === 'success' ? 'alert-success' : 'alert-error';
+            const alertHtml = `<div class="alert ${alertClass}">${message}</div>`;
+            
+            $(`#${containerId}`).html(alertHtml);
+  
+            setTimeout(() => {
+                $(`#${containerId}`).empty();
+            }, 5000);
+        }
\ No newline at end of file
diff --git a/examples_src/from_qais/EvalutionFinalTask/Page1/evaluationTask.html b/examples_src/from_qais/EvalutionFinalTask/Page1/evaluationTask.html
new file mode 100644
index 0000000..53cc48e
--- /dev/null
+++ b/examples_src/from_qais/EvalutionFinalTask/Page1/evaluationTask.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer Service Management System</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
+    <link rel="stylesheet" href="EvaluationTask.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1><i class="fas fa-users-cog"></i> Customer Service Management</h1>
+            <p>Manage users and complaints efficiently</p>
+        </div>
+
+        <div class="nav-tabs">
+            <button class="nav-tab active" data-tab="users">
+                <i class="fas fa-users"></i> View Users
+            </button>
+            <button class="nav-tab" data-tab="add-user">
+                <i class="fas fa-user-plus"></i> Add User
+            </button>
+            <button class="nav-tab" data-tab="complaints">
+                <i class="fas fa-clipboard-list"></i> Submit Complaint
+            </button>
+        </div>
+
+        <!-- View Users Tab -->
+        <div id="users" class="tab-content active">
+            <h2><i class="fas fa-users"></i> All Users</h2>
+            <div id="users-loading" class="loading">
+                <i class="fas fa-spinner"></i>
+                <p>Loading users...</p>
+            </div>
+            <div id="users-content" style="display: none;">
+                <table class="users-table">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Name</th>
+                            <th>Email</th>
+                            <th>Phone</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="users-tbody">
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Add User Tab -->
+        <div id="add-user" class="tab-content">
+            <h2><i class="fas fa-user-plus"></i> Add New User</h2>
+            <div id="add-user-alert"></div>
+            <form id="add-user-form">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="user-name">ID</label>
+                        <input type="text" id="user-name" name="name" required>
+                    </div>
+                     <div class="form-group">
+                        <label for="user-address">Name</label>
+                        <input type="text" id="user-address" name="address">
+                    </div>
+                    <div class="form-group">
+                        <label for="user-email">Email</label>
+                        <input type="email" id="user-email" name="email" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="user-phone">Phone</label>
+                        <input type="tel" id="user-phone" name="phone" required>
+                    </div>
+    
+                </div>
+                <button type="submit" class="btn btn-primary">
+                    <i class="fas fa-plus"></i> Add User
+                </button>
+            </form>
+        </div>
+        <div id="complaints" class="tab-content">
+            <h2><i class="fas fa-clipboard-list"></i> Submit Complaint</h2>
+            <div id="complaint-alert"></div>
+            <form id="complaint-form">
+                <div class="form-group">
+                    <label for="complaint-user">Select User</label>
+                    <select id="complaint-user" name="userId" required>
+                        <option value="">Choose a user...</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="complaint-title">Complaint Title</label>
+                    <input type="text" id="complaint-title" name="title" required>
+                </div>
+                <div class="form-group">
+                    <label for="complaint-description">Description</label>
+                    <textarea id="complaint-description" name="description" required></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="complaint-status">Status</label>
+                    <select id="complaint-status" name="status" required>
+                        <option value="open">Open</option>
+                        <option value="in-progress">In Progress</option>
+                        <option value="resolved">Resolved</option>
+                        <option value="closed">Closed</option>
+                    </select>
+                </div>
+                <button type="submit" class="btn btn-primary">
+                    <i class="fas fa-paper-plane"></i> Submit Complaint
+                </button>
+            </form>
+        </div>
+    </div>
+    <div id="edit-user-modal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h3><i class="fas fa-edit"></i> Edit User</h3>
+            <div id="edit-user-alert"></div>
+            <form id="edit-user-form">
+                <input type="hidden" id="edit-user-id" name="id">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="edit-user-name">ID</label>
+                        <input type="text" id="edit-user-name" name="name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="edit-user-email">Email</label>
+                        <input type="email" id="edit-user-email" name="email" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="edit-user-phone">Phone</label>
+                        <input type="tel" id="edit-user-phone" name="phone" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="edit-user-address">Address</label>
+                        <input type="text" id="edit-user-address" name="address">
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-success">
+                    <i class="fas fa-save"></i> Save Changes
+                </button>
+            </form>
+        </div>
+    </div>
+    <div id="delete-modal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h3><i class="fas fa-exclamation-triangle"></i> Confirm Delete</h3>
+            <p>Are you sure you want to delete this user? This action cannot be undone.</p>
+            <div style="margin-top: 20px;">
+                <button id="confirm-delete" class="btn btn-danger">
+                    <i class="fas fa-trash"></i> Delete User
+                </button>
+                <button id="cancel-delete" class="btn" style="background: #6c757d; color: white;">
+                    <i class="fas fa-times"></i> Cancel
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script src="EvaluationTask.js"></script>
+</body>
+</html>
\ No newline at end of file
