added service project job details screen

lib/controller/service_project/service_project_details_screen_controller.dart

@@ -2,6 +2,7 @@ import 'package:get/get.dart';
 import 'package:marco/helpers/services/api_service.dart';
 import 'package:marco/model/service_project/service_projects_details_model.dart';
 import 'package:marco/model/service_project/job_list_model.dart';
+import 'package:marco/model/service_project/service_project_job_detail_model.dart';
 
 class ServiceProjectDetailsController extends GetxController {
   // Selected project id
@@ -13,13 +14,18 @@ class ServiceProjectDetailsController extends GetxController {
   // Job list
   var jobList = <JobEntity>[].obs;
 
+  // Job detail for a selected job
+  var jobDetail = Rxn<JobDetailsResponse>();
+
   // Loading states
   var isLoading = false.obs;
   var isJobLoading = false.obs;
+  var isJobDetailLoading = false.obs;
 
   // Error messages
   var errorMessage = ''.obs;
   var jobErrorMessage = ''.obs;
+  var jobDetailErrorMessage = ''.obs;
 
   // Pagination
   var pageNumber = 1;
@@ -53,14 +59,12 @@ class ServiceProjectDetailsController extends GetxController {
     errorMessage.value = '';
 
     try {
-      final result =
+      final result = await ApiService.getServiceProjectDetailApi(projectId.value);
-          await ApiService.getServiceProjectDetailApi(projectId.value);
 
       if (result != null && result.data != null) {
         projectDetail.value = result.data!;
       } else {
-        errorMessage.value =
+        errorMessage.value = result?.message ?? "Failed to fetch project details";
-            result?.message ?? "Failed to fetch project details";
       }
     } catch (e) {
       errorMessage.value = "Error: $e";
@@ -83,7 +87,7 @@ class ServiceProjectDetailsController extends GetxController {
 
     try {
       final result = await ApiService.getServiceProjectJobListApi(
-        projectId:  "",
+        projectId: projectId.value, 
         pageNumber: pageNumber,
         pageSize: pageSize,
         isActive: true,
@@ -122,4 +126,28 @@ class ServiceProjectDetailsController extends GetxController {
       fetchProjectJobs(initialLoad: true),
     ]);
   }
+
+  /// Fetch job details by job ID
+  Future<void> fetchJobDetail(String jobId) async {
+    if (jobId.isEmpty) {
+      jobDetailErrorMessage.value = "Invalid job ID";
+      return;
+    }
+
+    isJobDetailLoading.value = true;
+    jobDetailErrorMessage.value = '';
+
+    try {
+      final result = await ApiService.getServiceProjectJobDetailApi(jobId);
+      if (result != null) {
+        jobDetail.value = result;
+      } else {
+        jobDetailErrorMessage.value = "Failed to fetch job details";
+      }
+    } catch (e) {
+      jobDetailErrorMessage.value = "Error fetching job details: $e";
+    } finally {
+      isJobDetailLoading.value = false;
+    }
+  }
 }

lib/helpers/services/api_endpoints.dart

@@ -1,8 +1,8 @@
 class ApiEndpoints {
-  // static const String baseUrl = "https://stageapi.marcoaiot.com/api";
+  static const String baseUrl = "https://stageapi.marcoaiot.com/api";
   // static const String baseUrl = "https://api.marcoaiot.com/api";
   // static const String baseUrl = "https://devapi.marcoaiot.com/api";
-    static const String baseUrl = "https://mapi.marcoaiot.com/api";
+    // static const String baseUrl = "https://mapi.marcoaiot.com/api";
 
 
   static const String getMasterCurrencies = "/Master/currencies/list";

lib/helpers/services/api_service.dart

@@ -36,6 +36,7 @@ import 'package:marco/model/finance/advance_payment_model.dart';
 import 'package:marco/model/service_project/service_projects_list_model.dart';
 import 'package:marco/model/service_project/service_projects_details_model.dart';
 import 'package:marco/model/service_project/job_list_model.dart';
+import 'package:marco/model/service_project/service_project_job_detail_model.dart';
 
 class ApiService {
   static const bool enableLogs = true;
@@ -307,6 +308,35 @@ class ApiService {
 
   // Service Project Module APIs
 
+
+/// Get details for a single Service Project Job
+static Future<JobDetailsResponse?> getServiceProjectJobDetailApi(String jobId) async {
+  final endpoint = "${ApiEndpoints.getServiceProjectJobDetail}/$jobId";
+  logSafe("Fetching Job Detail for Job ID: $jobId");
+  
+  try {
+    final response = await _getRequest(endpoint);
+    if (response == null) {
+      logSafe("Service Project Job Detail request failed: null response", level: LogLevel.error);
+      return null;
+    }
+    
+    final jsonResponse = _parseResponseForAllData(
+      response,
+      label: "Service Project Job Detail",
+    );
+    
+    if (jsonResponse != null) {
+      return JobDetailsResponse.fromJson(jsonResponse);
+    }
+  } catch (e, stack) {
+    logSafe("Exception during getServiceProjectJobDetailApi: $e", level: LogLevel.error);
+    logSafe("StackTrace: $stack", level: LogLevel.debug);
+  }
+  
+  return null;
+}
+
   /// Create a new Service Project Job
   static Future<bool> createServiceProjectJobApi({
     required String title,

lib/helpers/widgets/avatar.dart

@@ -5,14 +5,16 @@ import 'package:marco/helpers/widgets/my_text.dart';
 class Avatar extends StatelessWidget {
   final String firstName;
   final String lastName;
+  final String? imageUrl;
   final double size;
-  final Color? backgroundColor; 
+  final Color? backgroundColor;
   final Color textColor;
 
   const Avatar({
     super.key,
     required this.firstName,
     required this.lastName,
+    this.imageUrl,
     this.size = 46.0,
     this.backgroundColor,
     this.textColor = Colors.white,
@@ -20,9 +22,24 @@ class Avatar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    String initials = "${firstName.isNotEmpty ? firstName[0] : ''}${lastName.isNotEmpty ? lastName[0] : ''}".toUpperCase();
+    if (imageUrl != null && imageUrl!.isNotEmpty) {
+      return ClipRRect(
+        borderRadius: BorderRadius.circular(size / 2),
+        child: Image.network(
+          imageUrl!,
+          width: size,
+          height: size,
+          fit: BoxFit.cover,
+        ),
+      );
+    }
 
-    final Color bgColor = backgroundColor ?? _getFlatColorFromName('$firstName$lastName');
+    String initials =
+        "${firstName.isNotEmpty ? firstName[0] : ''}${lastName.isNotEmpty ? lastName[0] : ''}"
+            .toUpperCase();
+
+    final Color bgColor =
+        backgroundColor ?? _getFlatColorFromName('$firstName$lastName');
 
     return MyContainer.rounded(
       height: size,
@@ -32,36 +49,36 @@ class Avatar extends StatelessWidget {
       child: Center(
         child: MyText(
           initials,
-          fontSize: size * 0.45, // 👈 scales with avatar size
+          fontSize: size * 0.45,
           fontWeight: 600,
           color: textColor,
         ),
       ),
     );
   }
-
+}
-  // Use fixed flat color palette and pick based on hash
+
-  Color _getFlatColorFromName(String name) {
+// Use fixed flat color palette and pick based on hash
-    final colors = <Color>[
+Color _getFlatColorFromName(String name) {
-      Color(0xFFE57373), // Red
+  final colors = <Color>[
-      Color(0xFFF06292), // Pink
+    Color(0xFFE57373), // Red
-      Color(0xFFBA68C8), // Purple
+    Color(0xFFF06292), // Pink
-      Color(0xFF9575CD), // Deep Purple
+    Color(0xFFBA68C8), // Purple
-      Color(0xFF7986CB), // Indigo
+    Color(0xFF9575CD), // Deep Purple
-      Color(0xFF64B5F6), // Blue
+    Color(0xFF7986CB), // Indigo
-      Color(0xFF4FC3F7), // Light Blue
+    Color(0xFF64B5F6), // Blue
-      Color(0xFF4DD0E1), // Cyan
+    Color(0xFF4FC3F7), // Light Blue
-      Color(0xFF4DB6AC), // Teal
+    Color(0xFF4DD0E1), // Cyan
-      Color(0xFF81C784), // Green
+    Color(0xFF4DB6AC), // Teal
-      Color(0xFFAED581), // Light Green
+    Color(0xFF81C784), // Green
-      Color(0xFFDCE775), // Lime
+    Color(0xFFAED581), // Light Green
-      Color(0xFFFFD54F), // Amber
+    Color(0xFFDCE775), // Lime
-      Color(0xFFFFB74D), // Orange
+    Color(0xFFFFD54F), // Amber
-      Color(0xFFA1887F), // Brown
+    Color(0xFFFFB74D), // Orange
-      Color(0xFF90A4AE), // Blue Grey
+    Color(0xFFA1887F), // Brown
-    ];
+    Color(0xFF90A4AE), // Blue Grey
-
+  ];
-    int index = name.hashCode.abs() % colors.length;
+
-    return colors[index];
+  int index = name.hashCode.abs() % colors.length;
-  }
+  return colors[index];
 }

lib/helpers/widgets/custom_app_bar.dart

@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/controller/project_controller.dart';
+import 'package:marco/helpers/widgets/my_spacing.dart';
+import 'package:marco/helpers/widgets/my_text.dart';
 
 class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
   final String title;
@@ -17,67 +18,67 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
   Widget build(BuildContext context) {
     return PreferredSize(
       preferredSize: const Size.fromHeight(72),
-      child: Container(
+      child: AppBar(
-        decoration: BoxDecoration(
+        backgroundColor: const Color(0xFFF5F5F5),
-          color: const Color(0xFFF5F5F5),
+        elevation: 0.5,
-          boxShadow: [
+        automaticallyImplyLeading: false,
-            BoxShadow(
+        titleSpacing: 0,
-              color: Colors.black.withOpacity(0.15),
+        title: Padding(
-              blurRadius: 0.5, 
+          padding: MySpacing.xy(16, 0),
-              offset: const Offset(0, 0.5),
+          child: Row(
-            )
+            crossAxisAlignment: CrossAxisAlignment.center,
-          ],
+            children: [
-        ),
+              IconButton(
-        child: SafeArea(
+                icon: const Icon(
-          child: Padding(
+                  Icons.arrow_back_ios_new,
-            padding: const EdgeInsets.symmetric(horizontal: 16),
+                  color: Colors.black,
-            child: Row(
+                  size: 20,
-              children: [
-                IconButton(
-                  icon: const Icon(Icons.arrow_back_ios_new,
-                      color: Colors.black, size: 20), 
-                  onPressed: onBackPressed ?? Get.back, 
-                  splashRadius: 24,
                 ),
-                const SizedBox(width: 8),
+                onPressed: onBackPressed ?? () => Get.back(),
-                Expanded(
+              ),
-                  child: Column(
+              MySpacing.width(5),
-                    mainAxisAlignment: MainAxisAlignment.center,
+              Expanded(
-                    crossAxisAlignment: CrossAxisAlignment.start,
+                child: Column(
-                    children: [
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                      MyText.titleLarge(
+                  mainAxisSize: MainAxisSize.min,
-                        title,
+                  children: [
-                        fontWeight: 700, 
+                    // TITLE
-                        color: Colors.black,
+                    MyText.titleLarge(
-                      ),
+                      title,
-                      const SizedBox(height: 2),
+                      fontWeight: 700,
-                      GetBuilder<ProjectController>(
+                      color: Colors.black,
-                        builder: (projectController) {
+                    ),
-                          final projectName =
+
-                              projectController.selectedProject?.name ??
+                    MySpacing.height(2),
-                                  'Select Project';
+
-                          return Row(
+                    // PROJECT NAME ROW (copied exactly)
-                            children: [
+                    GetBuilder<ProjectController>(
-                              const Icon(Icons.work_outline,
+                      builder: (projectController) {
-                                  size: 14, color: Colors.grey), 
+                        final projectName =
-                              const SizedBox(width: 4),
+                            projectController.selectedProject?.name ??
-                              Expanded(
+                                'Select Project';
-                                child: MyText.bodySmall(
+
-                                  projectName,
+                        return Row(
-                                  fontWeight: 600,
+                          children: [
-                                  overflow: TextOverflow.ellipsis,
+                            const Icon(Icons.work_outline,
-                                  color: Colors.grey[700], 
+                                size: 14, color: Colors.grey),
-                                ),
+                            MySpacing.width(4),
+                            Expanded(
+                              child: MyText.bodySmall(
+                                projectName,
+                                fontWeight: 600,
+                                overflow: TextOverflow.ellipsis,
+                                color: Colors.grey[700],
                               ),
-                            ],
+                            ),
-                          );
+                          ],
-                        },
+                        );
-                      ),
+                      },
-                    ],
+                    ),
-                  ),
+                  ],
                 ),
-              ],
+              ),
-            ),
+            ],
           ),
         ),
       ),

lib/model/service_project/service_project_job_detail_model.dart

@@ -0,0 +1,244 @@
+class JobDetailsResponse {
+  final bool success;
+  final String message;
+  final JobData? data;
+  final dynamic errors;
+  final int statusCode;
+  final String timestamp;
+
+  JobDetailsResponse({
+    required this.success,
+    required this.message,
+    this.data,
+    this.errors,
+    required this.statusCode,
+    required this.timestamp,
+  });
+
+  factory JobDetailsResponse.fromJson(Map<String, dynamic> json) {
+    return JobDetailsResponse(
+      success: json['success'] as bool,
+      message: json['message'] as String,
+      data: json['data'] != null ? JobData.fromJson(json['data']) : null,
+      errors: json['errors'],
+      statusCode: json['statusCode'] as int,
+      timestamp: json['timestamp'] as String,
+    );
+  }
+}
+
+class JobData {
+  final String id;
+  final String title;
+  final String description;
+  final Project project;
+  final List<Assignee> assignees;
+  final Status status;
+  final String startDate;
+  final String dueDate;
+  final bool isActive;
+  final String createdAt;
+  final User createdBy;
+  final List<Tag> tags;
+  final List<UpdateLog> updateLogs;
+
+  JobData({
+    required this.id,
+    required this.title,
+    required this.description,
+    required this.project,
+    required this.assignees,
+    required this.status,
+    required this.startDate,
+    required this.dueDate,
+    required this.isActive,
+    required this.createdAt,
+    required this.createdBy,
+    required this.tags,
+    required this.updateLogs,
+  });
+
+  factory JobData.fromJson(Map<String, dynamic> json) {
+    return JobData(
+      id: json['id'] as String,
+      title: json['title'] as String,
+      description: json['description'] as String,
+      project: Project.fromJson(json['project']),
+      assignees: (json['assignees'] as List<dynamic>)
+          .map((e) => Assignee.fromJson(e))
+          .toList(),
+      status: Status.fromJson(json['status']),
+      startDate: json['startDate'] as String,
+      dueDate: json['dueDate'] as String,
+      isActive: json['isActive'] as bool,
+      createdAt: json['createdAt'] as String,
+      createdBy: User.fromJson(json['createdBy']),
+      tags: (json['tags'] as List<dynamic>).map((e) => Tag.fromJson(e)).toList(),
+      updateLogs: (json['updateLogs'] as List<dynamic>)
+          .map((e) => UpdateLog.fromJson(e))
+          .toList(),
+    );
+  }
+}
+
+class Project {
+  final String id;
+  final String name;
+  final String shortName;
+  final String assignedDate;
+  final String contactName;
+  final String contactPhone;
+  final String contactEmail;
+
+  Project({
+    required this.id,
+    required this.name,
+    required this.shortName,
+    required this.assignedDate,
+    required this.contactName,
+    required this.contactPhone,
+    required this.contactEmail,
+  });
+
+  factory Project.fromJson(Map<String, dynamic> json) {
+    return Project(
+      id: json['id'] as String,
+      name: json['name'] as String,
+      shortName: json['shortName'] as String,
+      assignedDate: json['assignedDate'] as String,
+      contactName: json['contactName'] as String,
+      contactPhone: json['contactPhone'] as String,
+      contactEmail: json['contactEmail'] as String,
+    );
+  }
+}
+
+class Assignee {
+  final String id;
+  final String firstName;
+  final String lastName;
+  final String email;
+  final String photo;
+  final String jobRoleId;
+  final String jobRoleName;
+
+  Assignee({
+    required this.id,
+    required this.firstName,
+    required this.lastName,
+    required this.email,
+    required this.photo,
+    required this.jobRoleId,
+    required this.jobRoleName,
+  });
+
+  factory Assignee.fromJson(Map<String, dynamic> json) {
+    return Assignee(
+      id: json['id'] as String,
+      firstName: json['firstName'] as String,
+      lastName: json['lastName'] as String,
+      email: json['email'] as String,
+      photo: json['photo'] as String,
+      jobRoleId: json['jobRoleId'] as String,
+      jobRoleName: json['jobRoleName'] as String,
+    );
+  }
+}
+
+class Status {
+  final String id;
+  final String name;
+  final String displayName;
+  final int level;
+
+  Status({
+    required this.id,
+    required this.name,
+    required this.displayName,
+    required this.level,
+  });
+
+  factory Status.fromJson(Map<String, dynamic> json) {
+    return Status(
+      id: json['id'] as String,
+      name: json['name'] as String,
+      displayName: json['displayName'] as String,
+      level: json['level'] as int,
+    );
+  }
+}
+
+class User {
+  final String id;
+  final String firstName;
+  final String lastName;
+  final String email;
+  final String photo;
+  final String jobRoleId;
+  final String jobRoleName;
+
+  User({
+    required this.id,
+    required this.firstName,
+    required this.lastName,
+    required this.email,
+    required this.photo,
+    required this.jobRoleId,
+    required this.jobRoleName,
+  });
+
+  factory User.fromJson(Map<String, dynamic> json) {
+    return User(
+      id: json['id'] as String,
+      firstName: json['firstName'] as String,
+      lastName: json['lastName'] as String,
+      email: json['email'] as String,
+      photo: json['photo'] as String,
+      jobRoleId: json['jobRoleId'] as String,
+      jobRoleName: json['jobRoleName'] as String,
+    );
+  }
+}
+
+class Tag {
+  final String id;
+  final String name;
+
+  Tag({
+    required this.id,
+    required this.name,
+  });
+
+  factory Tag.fromJson(Map<String, dynamic> json) {
+    return Tag(
+      id: json['id'] as String,
+      name: json['name'] as String,
+    );
+  }
+}
+
+class UpdateLog {
+  final String id;
+  final Status? status;
+  final Status nextStatus;
+  final String comment;
+  final User updatedBy;
+
+  UpdateLog({
+    required this.id,
+    this.status,
+    required this.nextStatus,
+    required this.comment,
+    required this.updatedBy,
+  });
+
+  factory UpdateLog.fromJson(Map<String, dynamic> json) {
+    return UpdateLog(
+      id: json['id'] as String,
+      status: json['status'] != null ? Status.fromJson(json['status']) : null,
+      nextStatus: Status.fromJson(json['nextStatus']),
+      comment: json['comment'] as String,
+      updatedBy: User.fromJson(json['updatedBy']),
+    );
+  }
+}

lib/view/service_project/service_project_details_screen.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:intl/intl.dart';
-import 'package:marco/controller/project_controller.dart';
 import 'package:marco/controller/service_project/service_project_details_screen_controller.dart';
 import 'package:marco/helpers/utils/launcher_utils.dart';
 import 'package:marco/helpers/widgets/my_spacing.dart';
@@ -9,6 +8,9 @@ import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/model/service_project/add_service_project_job_bottom_sheet.dart';
 import 'package:marco/helpers/utils/date_time_utils.dart';
+import 'package:marco/view/service_project/service_project_job_detail_screen.dart';
+import 'package:marco/helpers/widgets/custom_app_bar.dart';
+import 'package:marco/helpers/widgets/avatar.dart';
 
 class ServiceProjectDetailsScreen extends StatefulWidget {
   final String projectId;
@@ -345,115 +347,118 @@ class _ServiceProjectDetailsScreenState
           }
 
           final job = controller.jobList[index];
-          return Card(
+          return InkWell(
-            elevation: 3,
+            onTap: () {
-            shadowColor: Colors.black26,
+              Get.to(() => JobDetailsScreen(jobId: job.id));
-            shape:
+            },
-                RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+            child: Card(
-            child: Padding(
+              elevation: 3,
-              padding: const EdgeInsets.all(16),
+              shadowColor: Colors.black26,
-              child: Column(
+              shape: RoundedRectangleBorder(
-                crossAxisAlignment: CrossAxisAlignment.start,
+                  borderRadius: BorderRadius.circular(5)),
-                children: [
+              child: Padding(
-                  // Job Title
+                padding: const EdgeInsets.all(16),
-                  MyText.titleMedium(job.title, fontWeight: 700),
+                child: Column(
-                  MySpacing.height(6),
+                  crossAxisAlignment: CrossAxisAlignment.start,
-
+                  children: [
-                  // Job Description
+                    MyText.titleMedium(job.title, fontWeight: 700),
-                  MyText.bodySmall(
+                    MySpacing.height(6),
-                    job.description.isNotEmpty
+                    MyText.bodySmall(
-                        ? job.description
+                      job.description.isNotEmpty
-                        : "No description provided",
+                          ? job.description
-                    color: Colors.grey[700],
+                          : "No description provided",
-                  ),
+                      color: Colors.grey[700],
-
-                  // Tags
-                  if (job.tags != null && job.tags!.isNotEmpty)
-                    Padding(
-                      padding: const EdgeInsets.only(top: 2),
-                      child: Wrap(
-                        spacing: 2,
-                        runSpacing: 4,
-                        children: job.tags!.map((tag) {
-                          return Chip(
-                            label: Text(
-                              tag.name,
-                              style: const TextStyle(fontSize: 12),
-                            ),
-                            backgroundColor: Colors.grey[200],
-                            shape: RoundedRectangleBorder(
-                              borderRadius: BorderRadius.circular(5),
-                            ),
-                          );
-                        }).toList(),
-                      ),
                     ),
 
-                  MySpacing.height(8),
+                    // Tags
-
+                    if (job.tags != null && job.tags!.isNotEmpty)
-                  // Assignees & Status
+                      Padding(
-                  Row(
+                        padding: const EdgeInsets.only(top: 2),
-                    children: [
+                        child: Wrap(
-                      if (job.assignees != null && job.assignees!.isNotEmpty)
+                          spacing: 2,
-                        ...job.assignees!.map((assignee) {
+                          runSpacing: 4,
-                          return Padding(
+                          children: job.tags!.map((tag) {
-                            padding: const EdgeInsets.only(right: 6),
+                            return Chip(
-                            child: CircleAvatar(
+                              label: Text(
-                              radius: 12,
+                                tag.name,
-                              backgroundImage: assignee.photo.isNotEmpty
+                                style: const TextStyle(fontSize: 12),
-                                  ? NetworkImage(assignee.photo)
+                              ),
-                                  : null,
+                              backgroundColor: Colors.grey[200],
-                              child: assignee.photo.isEmpty
+                              shape: RoundedRectangleBorder(
-                                  ? Text(assignee.firstName[0])
+                                borderRadius: BorderRadius.circular(5),
-                                  : null,
+                              ),
-                            ),
+                            );
-                          );
+                          }).toList(),
-                        }).toList(),
+                        ),
-                    ],
-                  ),
-
-                  MySpacing.height(8),
-
-                  // Date Row with Status Chip
-                  Row(
-                    children: [
-                      // Dates (same as existing)
-                      const Icon(Icons.calendar_today_outlined,
-                          size: 14, color: Colors.grey),
-                      MySpacing.width(4),
-                      Text(
-                        "${DateTimeUtils.convertUtcToLocal(job.startDate, format: 'dd MMM yyyy')} to  "
-                        "${DateTimeUtils.convertUtcToLocal(job.dueDate, format: 'dd MMM yyyy')}",
-                        style:
-                            const TextStyle(fontSize: 12, color: Colors.grey),
                       ),
 
-                      const Spacer(),
+                    MySpacing.height(8),
 
-                      // Status Chip
+                    // Assignees & Status
-                      Container(
+                    Row(
-                        padding: const EdgeInsets.symmetric(
+                      children: [
-                            horizontal: 8, vertical: 4),
+                        if (job.assignees != null && job.assignees!.isNotEmpty)
-                        decoration: BoxDecoration(
+                          ...job.assignees!.map((assignee) {
-                          color: job.status.name.toLowerCase() == 'completed'
+                            return Padding(
-                              ? Colors.green[100]
+                              padding: const EdgeInsets.only(right: 6),
-                              : Colors.orange[100],
+                              child: Avatar(
-                          borderRadius: BorderRadius.circular(5),
+                                firstName: assignee.firstName,
+                                lastName: assignee.lastName,
+                                size:
+                                    24, 
+                                imageUrl: assignee.photo.isNotEmpty
+                                    ? assignee.photo
+                                    : null,
+                              ),
+                            );
+                          }).toList(),
+                      ],
+                    ),
+
+                    MySpacing.height(8),
+
+                    // Date Row with Status Chip
+                    Row(
+                      children: [
+                        // Dates (same as existing)
+                        const Icon(Icons.calendar_today_outlined,
+                            size: 14, color: Colors.grey),
+                        MySpacing.width(4),
+                        Text(
+                          "${DateTimeUtils.convertUtcToLocal(job.startDate, format: 'dd MMM yyyy')} to  "
+                          "${DateTimeUtils.convertUtcToLocal(job.dueDate, format: 'dd MMM yyyy')}",
+                          style:
+                              const TextStyle(fontSize: 12, color: Colors.grey),
                         ),
-                        child: Text(
+
-                          job.status.displayName,
+                        const Spacer(),
-                          style: TextStyle(
+
-                            fontSize: 12,
+                        // Status Chip
+                        Container(
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 8, vertical: 4),
+                          decoration: BoxDecoration(
                             color: job.status.name.toLowerCase() == 'completed'
-                                ? Colors.green[800]
+                                ? Colors.green[100]
-                                : Colors.orange[800],
+                                : Colors.orange[100],
-                            fontWeight: FontWeight.w600,
+                            borderRadius: BorderRadius.circular(5),
+                          ),
+                          child: Text(
+                            job.status.displayName,
+                            style: TextStyle(
+                              fontSize: 12,
+                              color:
+                                  job.status.name.toLowerCase() == 'completed'
+                                      ? Colors.green[800]
+                                      : Colors.orange[800],
+                              fontWeight: FontWeight.w600,
+                            ),
                           ),
                         ),
-                      ),
+                      ],
-                    ],
+                    ),
-                  ),
+                  ],
-                ],
+                ),
               ),
             ),
           );
@@ -466,64 +471,9 @@ class _ServiceProjectDetailsScreenState
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: const Color(0xFFF5F5F5),
-      appBar: PreferredSize(
+      appBar: CustomAppBar(
-        preferredSize: const Size.fromHeight(72),
+        title: "Service Project Details",
-        child: AppBar(
+        onBackPressed: () => Get.toNamed('/dashboard/service-projects'),
-          backgroundColor: const Color(0xFFF5F5F5),
-          elevation: 0.5,
-          automaticallyImplyLeading: false,
-          titleSpacing: 0,
-          title: Padding(
-            padding: MySpacing.xy(16, 0),
-            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                IconButton(
-                  icon: const Icon(Icons.arrow_back_ios_new,
-                      color: Colors.black, size: 20),
-                  onPressed: () => Get.toNamed('/dashboard/service-projects'),
-                ),
-                MySpacing.width(8),
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      MyText.titleLarge(
-                        'Service Project Details',
-                        fontWeight: 700,
-                        color: Colors.black,
-                      ),
-                      MySpacing.height(2),
-                      GetBuilder<ProjectController>(
-                        builder: (projectController) {
-                          final projectName =
-                              projectController.selectedProject?.name ??
-                                  'Select Project';
-                          return Row(
-                            children: [
-                              const Icon(Icons.work_outline,
-                                  size: 14, color: Colors.grey),
-                              MySpacing.width(4),
-                              Expanded(
-                                child: MyText.bodySmall(
-                                  projectName,
-                                  fontWeight: 600,
-                                  overflow: TextOverflow.ellipsis,
-                                  color: Colors.grey[700],
-                                ),
-                              ),
-                            ],
-                          );
-                        },
-                      ),
-                    ],
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
       ),
       body: SafeArea(
         child: Column(

lib/view/service_project/service_project_job_detail_screen.dart

@@ -0,0 +1,341 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:marco/controller/service_project/service_project_details_screen_controller.dart';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
+import 'package:marco/helpers/widgets/my_spacing.dart';
+import 'package:marco/helpers/widgets/my_text.dart';
+import 'package:marco/helpers/utils/date_time_utils.dart';
+import 'package:marco/helpers/utils/launcher_utils.dart';
+import 'package:timeline_tile/timeline_tile.dart';
+import 'package:marco/model/service_project/service_project_job_detail_model.dart';
+import 'package:marco/helpers/widgets/custom_app_bar.dart';
+import 'package:marco/helpers/widgets/avatar.dart';
+
+class JobDetailsScreen extends StatefulWidget {
+  final String jobId;
+
+  const JobDetailsScreen({super.key, required this.jobId});
+
+  @override
+  State<JobDetailsScreen> createState() => _JobDetailsScreenState();
+}
+
+class _JobDetailsScreenState extends State<JobDetailsScreen> with UIMixin {
+  late final ServiceProjectDetailsController controller;
+
+  @override
+  void initState() {
+    super.initState();
+    controller = Get.put(ServiceProjectDetailsController());
+    controller.fetchJobDetail(widget.jobId);
+  }
+
+  Widget _buildSectionCard({
+    required String title,
+    required IconData titleIcon,
+    required List<Widget> children,
+  }) {
+    return Card(
+      elevation: 2,
+      shadowColor: Colors.black12,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Icon(titleIcon, size: 20),
+                MySpacing.width(8),
+                MyText.bodyLarge(
+                  title,
+                  fontWeight: 700,
+                  fontSize: 16,
+                )
+              ],
+            ),
+            MySpacing.height(8),
+            const Divider(),
+            ...children
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _rowTile(String label, String value, {bool copyable = false}) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            flex: 3,
+            child: MyText.bodySmall(label,
+                color: Colors.grey[600], fontWeight: 600),
+          ),
+          Expanded(
+            flex: 5,
+            child: GestureDetector(
+              onLongPress: copyable
+                  ? () => LauncherUtils.copyToClipboard(value, typeLabel: label)
+                  : null,
+              child: MyText.bodyMedium(value,
+                  fontWeight: 600,
+                  color: copyable ? Colors.blue : Colors.black87),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF5F5F5),
+      appBar: CustomAppBar(
+        title: "Service Project Job Details",
+        onBackPressed: () => Get.back(),
+      ),
+      body: Obx(() {
+        if (controller.isJobDetailLoading.value) {
+          return const Center(child: CircularProgressIndicator());
+        }
+
+        if (controller.jobDetailErrorMessage.value.isNotEmpty) {
+          return Center(
+            child: MyText.bodyMedium(controller.jobDetailErrorMessage.value),
+          );
+        }
+
+        final job = controller.jobDetail.value?.data;
+        if (job == null) {
+          return Center(child: MyText.bodyMedium("No details available"));
+        }
+
+        return SingleChildScrollView(
+          padding: MySpacing.all(16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // ====== HEADER CARD =======
+              Card(
+                elevation: 2,
+                shadowColor: Colors.black12,
+                shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(5)),
+                child: Padding(
+                  padding: const EdgeInsets.all(16),
+                  child: Row(
+                    children: [
+                      const Icon(Icons.task_outlined, size: 35),
+                      MySpacing.width(16),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            MyText.titleMedium(job.title, fontWeight: 700),
+                            MySpacing.height(5),
+                            MyText.bodySmall(job.project.name,
+                                color: Colors.grey[700]),
+                          ],
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+              ),
+
+              MySpacing.height(20),
+
+              // ====== Job Information =======
+              _buildSectionCard(
+                title: "Job Information",
+                titleIcon: Icons.info_outline,
+                children: [
+                  _rowTile("Description", job.description),
+                  _rowTile(
+                    "Start Date",
+                    DateTimeUtils.convertUtcToLocal(job.startDate,
+                        format: "dd MMM yyyy"),
+                  ),
+                  _rowTile(
+                    "Due Date",
+                    DateTimeUtils.convertUtcToLocal(job.dueDate,
+                        format: "dd MMM yyyy"),
+                  ),
+                  _rowTile("Status", job.status.displayName),
+                ],
+              ),
+
+              MySpacing.height(16),
+
+              // ====== Assignees =======
+              _buildSectionCard(
+                title: "Assigned To",
+                titleIcon: Icons.people_outline,
+                children: job.assignees.isNotEmpty
+                    ? job.assignees.map((a) {
+                        return Padding(
+                          padding: const EdgeInsets.symmetric(vertical: 6),
+                          child: Row(
+                            children: [
+                              Avatar(
+                                firstName: a.firstName,
+                                lastName: a.lastName,
+                                size:
+                                    32, 
+                                backgroundColor:
+                                    a.photo.isEmpty ? null : Colors.transparent,
+                                textColor: Colors.white,
+                              ),
+                              MySpacing.width(10),
+                              MyText.bodyMedium("${a.firstName} ${a.lastName}"),
+                            ],
+                          ),
+                        );
+                      }).toList()
+                    : [MyText.bodySmall("No assignees", color: Colors.grey)],
+              ),
+
+              MySpacing.height(16),
+
+              // ====== Tags =======
+              if (job.tags.isNotEmpty)
+                _buildSectionCard(
+                  title: "Tags",
+                  titleIcon: Icons.label_outline,
+                  children: [
+                    Wrap(
+                      spacing: 6,
+                      runSpacing: 6,
+                      children: job.tags.map((tag) {
+                        return Chip(
+                          label: Text(tag.name),
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(5),
+                          ),
+                        );
+                      }).toList(),
+                    )
+                  ],
+                ),
+
+              MySpacing.height(16),
+
+              // ====== Update Logs (Timeline UI) =======
+              if (job.updateLogs.isNotEmpty)
+                _buildSectionCard(
+                  title: "Update Logs",
+                  titleIcon: Icons.history,
+                  children: [
+                    JobTimeline(logs: job.updateLogs),
+                  ],
+                ),
+
+              MySpacing.height(40),
+            ],
+          ),
+        );
+      }),
+    );
+  }
+}
+
+class JobTimeline extends StatelessWidget {
+  final List<UpdateLog> logs;
+
+  const JobTimeline({super.key, required this.logs});
+
+  @override
+  Widget build(BuildContext context) {
+    if (logs.isEmpty) {
+      return MyText.bodyMedium('No timeline available', color: Colors.grey);
+    }
+
+    // Show latest updates at the top
+    final reversedLogs = logs.reversed.toList();
+
+    return ListView.builder(
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      itemCount: reversedLogs.length,
+      itemBuilder: (_, index) {
+        final log = reversedLogs[index];
+
+        final statusName = log.status?.displayName ?? "Created";
+        final nextStatusName = log.nextStatus.displayName;
+        final comment = log.comment;
+
+        final updatedBy =
+            "${log.updatedBy.firstName} ${log.updatedBy.lastName}";
+
+        final initials =
+            "${log.updatedBy.firstName.isNotEmpty ? log.updatedBy.firstName[0] : ''}"
+            "${log.updatedBy.lastName.isNotEmpty ? log.updatedBy.lastName[0] : ''}";
+
+        return TimelineTile(
+          alignment: TimelineAlign.start,
+          isFirst: index == 0,
+          isLast: index == reversedLogs.length - 1,
+          indicatorStyle: IndicatorStyle(
+            width: 16,
+            height: 16,
+            indicator: Container(
+              decoration: const BoxDecoration(
+                color: Colors.blue,
+                shape: BoxShape.circle,
+              ),
+            ),
+          ),
+          beforeLineStyle: LineStyle(
+            color: Colors.grey.shade300,
+            thickness: 2,
+          ),
+          endChild: Padding(
+            padding: const EdgeInsets.all(12),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // STATUS CHANGE ROW
+                MyText.bodyMedium(
+                  "$statusName → $nextStatusName",
+                  fontWeight: 600,
+                ),
+                const SizedBox(height: 8),
+
+                // COMMENT
+                if (comment.isNotEmpty) MyText.bodyMedium(comment),
+
+                const SizedBox(height: 10),
+
+                // Updated by
+                Row(
+                  children: [
+                    Container(
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: 6, vertical: 2),
+                      decoration: BoxDecoration(
+                        color: Colors.grey.shade300,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                      child: MyText.bodySmall(initials, fontWeight: 600),
+                    ),
+                    const SizedBox(width: 6),
+                    Expanded(
+                      child: MyText.bodySmall(updatedBy),
+                    ),
+                  ],
+                ),
+
+                const SizedBox(height: 10),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/view/service_project/service_project_screen.dart

@@ -8,7 +8,7 @@ import 'package:marco/controller/service_project/service_project_screen_controll
 import 'package:marco/model/service_project/service_projects_list_model.dart';
 import 'package:marco/helpers/utils/date_time_utils.dart';
 import 'package:marco/view/service_project/service_project_details_screen.dart';
-import 'package:marco/controller/project_controller.dart';
+import 'package:marco/helpers/widgets/custom_app_bar.dart';
 
 class ServiceProjectScreen extends StatefulWidget {
   const ServiceProjectScreen({super.key});
@@ -194,64 +194,9 @@ class _ServiceProjectScreenState extends State<ServiceProjectScreen>
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: const Color(0xFFF5F5F5),
-      appBar: PreferredSize(
+      appBar: CustomAppBar(
-        preferredSize: const Size.fromHeight(72),
+        title: "Service Projects",
-        child: AppBar(
+        onBackPressed: () => Get.toNamed('/dashboard'),
-          backgroundColor: const Color(0xFFF5F5F5),
-          elevation: 0.5,
-          automaticallyImplyLeading: false,
-          titleSpacing: 0,
-          title: Padding(
-            padding: MySpacing.xy(16, 0),
-            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                IconButton(
-                  icon: const Icon(Icons.arrow_back_ios_new,
-                      color: Colors.black, size: 20),
-                  onPressed: () => Get.toNamed('/dashboard'),
-                ),
-                MySpacing.width(8),
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      MyText.titleLarge(
-                        'Service Projects',
-                        fontWeight: 700,
-                        color: Colors.black,
-                      ),
-                      MySpacing.height(2),
-                      GetBuilder<ProjectController>(
-                        builder: (projectController) {
-                          final projectName =
-                              projectController.selectedProject?.name ??
-                                  'Select Project';
-                          return Row(
-                            children: [
-                              const Icon(Icons.work_outline,
-                                  size: 14, color: Colors.grey),
-                              MySpacing.width(4),
-                              Expanded(
-                                child: MyText.bodySmall(
-                                  projectName,
-                                  fontWeight: 600,
-                                  overflow: TextOverflow.ellipsis,
-                                  color: Colors.grey[700],
-                                ),
-                              ),
-                            ],
-                          );
-                        },
-                      ),
-                    ],
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
       ),
       body: Column(
         children: [