add data list courses & make changes in progress

- the list of courses having more data
- the progress bar is more clear to recognize by user

2 files changed, 73 insertions, 15 deletions

diff --git a/Student/Dashboard.ui.qml b/Student/Dashboard.ui.qml
index 16e8064..6c2a339 100644
--- a/Student/Dashboard.ui.qml
+++ b/Student/Dashboard.ui.qml
@@ -12,17 +12,29 @@ Flickable {
 
 		RowLayout {
 			Layout.fillWidth: true
+			height: 50
 			Label{
-				text: "Course Title"
+				text: "Course Title" 
+				font.bold: true
+				font.pixelSize: 30
 			}
 			Label{
 				text: "Total Lectures"
+				font.bold: true
+				color: "#666666"
+				font.pixelSize: 30
 			}
 			Label{
-				text: "Completed Lecture"
+				text: "Completed Lectures"
+				font.bold: true
+				color: "#666666"
+				font.pixelSize: 30
 			}
 			Label{
 				text: "Action"
+				font.bold: true
+				color: "#666666"
+				font.pixelSize: 30
 			}
 		}
 
@@ -35,16 +47,46 @@ Flickable {
 				ListElement {
 					title: qsTr("Building Scalable APIs with GraphQL")
 					image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+                                        level: "Beginner"
+                                        totalLectures: 16
+                                        completedLectures: 14
 				}
 				ListElement {
 					title: qsTr("Create a Design System in Figma")
 					image: "https://eduport.webestica.com/assets/images/courses/4by3/03.jpg"
+                                        level: "Beginner"
+                                        totalLectures: 42 
+                                        completedLectures: 40
 				}
+				ListElement {
+					title: qsTr("Graphic Design Masterclass")
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/02.jpg"
+                                        level: "Beginner"
+                                        totalLectures: 16
+                                        completedLectures: 14
+				}
+				ListElement {
+					title: qsTr("The Complete Web Development in python")
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/05.jpg"
+                                        level: "Beginner"
+                                        totalLectures: 28
+                                        completedLectures: 12
+				}
+				ListElement {
+					title: qsTr("Digital Marketing Masterclass")
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
+                                        level: "Advanced"
+                                        totalLectures: 32
+                                        completedLectures: 18
+				}
+				// Add more ListElements for other courses
 			}
 			delegate: CourseListItem {
 				width: tableBody.width
 				courseTitle.text: title
 				courseThumb.source: image
+
+				
 			}
 		}
 	}
diff --git a/Student/Dashboard/CourseListItem.ui.qml b/Student/Dashboard/CourseListItem.ui.qml
index 3a4d407..227d785 100644
--- a/Student/Dashboard/CourseListItem.ui.qml
+++ b/Student/Dashboard/CourseListItem.ui.qml
@@ -39,6 +39,8 @@ Item {
 		ColumnLayout{
 			id: courseProgressInfo
 			spacing: 0
+			width: parent.width - image.width - spacing
+
 			Label{
 				id: courseTitle
 				color: "#000000"
@@ -48,19 +50,30 @@ Item {
 				font.styleName: "Medium"
 				Layout.fillWidth: true
 			}
-			Label{
-				id: courseProgressPercentage
-				color: "#000000"
-				text: "80%"
-				font.pointSize: 16
-				font.family: "roboto"
-				font.styleName: "Medium"
-				horizontalAlignment: Text.AlignRight
-				Layout.fillWidth: true
-			}
-			ProgressBar {
-				id: courseProgressBar
-				value: 0.8
+
+			RowLayout { // So the Bar and % of value side by side
+				ProgressBar {
+					id: courseProgressBar
+					value: completedLectures / totalLectures * 100
+					to: 100
+					width: parent.width * 0.7
+					height: 10
+					background: Rectangle {
+						color: "#666666" // Background color of the ProgressBar
+					}
+				}
+				Label{
+					id: courseProgressPercentage
+	//				color: "#000000"
+					text:  Math.round(completedLectures / totalLectures * 100) + "%"
+					color: "#666666"
+	//				font.pixelSize: 14
+					font.pointSize: 14
+					font.family: "roboto"
+					font.styleName: "Medium"
+	//				horizontalAlignment: Text.AlignRight
+	//				Layout.fillWidth: true
+				}
 			}
 		}
 		Button {
@@ -70,6 +83,9 @@ Item {
 			font.weight: Font.Medium
 			font.family: "Roboto"
 			font.pointSize: 14
+			onClicked: {
+				// Implement resuming logic
+			}
 		}
 	}
 }