telnow_2025/lib/src/layouts/mobile/history_detail.dart

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:provider/provider.dart';
import 'package:telnow_mobile_new/src/layouts/functions/detail.dart';
import 'package:telnow_mobile_new/src/layouts/mobile/history_forum.dart';
import 'package:telnow_mobile_new/src/layouts/components/template.dart';
import 'package:telnow_mobile_new/src/utils/U.dart';
import 'package:telnow_mobile_new/src/utils/provider.dart';
import 'package:telnow_mobile_new/src/utils/ui_service.dart';
import 'package:timelines_plus/timelines_plus.dart';
import 'package:url_launcher/url_launcher.dart';

class MobHistoryDetailPage extends StatefulWidget {
  final int index;
  const MobHistoryDetailPage({required this.index, super.key});

  @override
  State<MobHistoryDetailPage> createState() => _MobHistoryDetailPageState();
}

class _MobHistoryDetailPageState extends State<MobHistoryDetailPage> {
  final DetailFunction detFunc = DetailFunction();

  TextEditingController controllerNote = new TextEditingController()..text = '';
  Map<String, dynamic> list = {};
  Map<String, dynamic> user = {};

  var rating = [
    {'key': 1, 'image': "assets/image/icon/very_dissatisfied.png", 'label': 'disatisfied'.tr()},
    {'key': 2, 'image': "assets/image/icon/dissatisfied.png", 'label': 'lessSatisfied'.tr()},
    {'key': 3, 'image': "assets/image/icon/neutral.png", 'label': 'satisfied'.tr()},
    {'key': 4, 'image': "assets/image/icon/satisfied.png", 'label': 'verySatisfied'.tr()},
    {'key': 5, 'image': "assets/image/icon/very_satisfied.png", 'label': 'reallyPleased'.tr()},
  ];
  bool _timeLimit = false;

  @override
  void initState() {
    getData();
    // TODO: implement initState
    super.initState();
  }

  getData() async{
    var res = await detFunc.getMission(UIService.getLocale(), Provider.of<HistoryModule>(context, listen: false).dataRequests()[widget.index]);
    setState((){
      user = res['user'];
      list = res['list'];
    });
    // print(list);
    // print(list['_parentTicket']);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: backgroundColor,
        appBar: appBarTemplate(context: context, title: 'detail'.tr(), action: list.isNotEmpty && list['currentState'] != 'DIPROSES' && list['currentState'] != 'DIANTRIKAN' && !list['autoResponse'] ? [
          Center(
            child: GestureDetector(
              child: Container(
                margin: EdgeInsetsDirectional.only(end: 16),
                padding: EdgeInsets.fromLTRB(16, 9, 16, 9),
                decoration: BoxDecoration(
                    color: primaryColor.withValues(alpha: 0.1),
                    border: Border.all(color: primaryColor),
                    borderRadius: BorderRadius.all(Radius.circular(50))
                ),
                child: Row(
                  children: [
                    Text('forum'.tr(), style: TextStyle(color: primaryColor, fontSize: 14)),
                    SizedBox(width: 5),
                    U.iconsax('messages-3', color: primaryColor, size: 20)
                  ],
                ),
              ),
              onTap: (){
                Provider.of<HistoryModule>(context, listen: false).setForumFalse(widget.index);
                navigateTo(context, MobHistoryForumPage(data: list));
              },
            ),
          )
        ]:null),
        body: Column(
          children: [
            divider(),
            Expanded(
              child: list.isNotEmpty?Container(
                alignment: Alignment.topCenter,
                width: U.bodyWidth(context),
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(list[U.langColumn(context, 'requestGroupDescription')]??'', style: TextStyle(color: textColor, fontWeight: FontWeight.w600)),
                            requestTiles(
                                image: list['_requestImage'] ?? "null",
                                title: list[U.langColumn(context, 'requestSubject')],
                                subtitle: list[U.langColumn(context, '_subjectDescription')]??'',
                                border: true
                            ),
                            SizedBox(height: 16),
                            textHorizontal('ticketNumber'.tr(), list['ticketNo'], copy: true),
                            SizedBox(height: 16),
                            user.isNotEmpty?renderRequested():Container(),
                            textHorizontal('location'.tr(), list['ipphoneExtLocation']),
                            SizedBox(height: 16),
                            divider(opacity: 0.05),
                            SizedBox(height: 16),

                            list['autoResponse'] ? Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('note'.tr(), style: TextStyle(color: textColor)),
                                SizedBox(height: 5),
                                list['responseText']!=null&&list['responseText']!=''?Linkify(
                                  text: list['responseText'], style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w300),
                                  onOpen: (link) async {
                                    if (await canLaunchUrl(Uri.parse(link.url))) {
                                      await launchUrl(Uri.parse(link.url));
                                    }
                                  },
                                ):Container(),

                                list['responseAttachment']!=null&&list['responseAttachment']!=''?list['_isPdf']?GestureDetector(
                                    child: Container(
                                        width: double.infinity,
                                        margin: EdgeInsets.only(top: 8),
                                        child: Center(
                                          child: Column(
                                            children: [
                                              Icon(Icons.picture_as_pdf, color: Colors.deepOrange, size: 50),
                                              Text('seeAttachment'.tr(), style: TextStyle(color: Colors.black45, fontSize: 12))
                                            ],
                                          ),
                                        ),
                                        decoration: BoxDecoration(
                                          border: Border.all(color: Colors.deepOrange),
                                          borderRadius: BorderRadius.all(Radius.circular(12)),
                                        )
                                    ),
                                    onTap: () => kIsWeb ? () async{
                                      Uri _url = Uri.parse(list['_mobileResponseAttachment']);
                                      await canLaunchUrl(_url) ? await launchUrl(_url) : print('Could not launch $_url');
                                      // html.window.open(list['responseAttachment'], '_blank');
                                    } : detFunc.openAttachment(list)
                                ):GestureDetector(
                                    child: Container(
                                      child:Image.network(list['_mobileResponseAttachment'], fit: BoxFit.cover, width: double.infinity, height: U.bodyWidth(context)/(kIsWeb?2.1:1.7), loadingBuilder:(BuildContext? context, Widget? child,ImageChunkEvent? loadingProgress) {
                                        if (loadingProgress == null) return child!;
                                        return Container(
                                          height: U.bodyWidth(context)/(kIsWeb?2.1:1.7),
                                          child: Center(
                                            child: CircularProgressIndicator(
                                              value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null,
                                            ),
                                          ),
                                        );
                                      },
                                      ),
                                    ),
                                    onTap: ()=>navigateTo(context, PhotoPreview('image'.tr(), list['_mobileResponseAttachment'], true))
                                ):Container()
                              ],
                            ) : attachment_new(list),

                            list['autoResponse'] ? Container() : SizedBox(height: 16),
                            list['autoResponse'] ? Container() : textVertical('note'.tr(), list['requestNote']!=''?list['requestNote']:'-'),
                            list['autoResponse'] ? Container() : SizedBox(height: 16),
                            list['autoResponse'] || list['datetimeScheduled'] == null || list['datetimeScheduled'] == '' ? Container() : Text("${"scheduleMessage".tr()} ${list['datetimeScheduled']}."),
                            SizedBox(height: 24),
                          ],
                        ),
                      ),
                      U.newServerVersion(1741166029) && list['_parentTicket'] != null?separator():Container(),
                      U.newServerVersion(1741166029) && list['_parentTicket'] != null?Padding(
                        padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('requestReference'.tr(), style: TextStyle(color: textColor, fontWeight: FontWeight.w600)),
                            SizedBox(height: 16),
                            textHorizontal('ticketNumber'.tr(), list['_parentTicket']['ticketNo']),
                            SizedBox(height: 16),
                            divider(opacity: 0.05),
                            SizedBox(height: 16),
                            textHorizontal('subject'.tr(), list['_parentTicket'][U.langColumn(context, 'requestSubject')]),
                            SizedBox(height: 16),
                            textHorizontal('note'.tr(), list['_parentTicket']['requestNote']!=null && list['_parentTicket']['requestNote']!=''?list['_parentTicket']['requestNote']:'-'),
                            SizedBox(height: 16),
                            divider(opacity: 0.05),
                            SizedBox(height: 16),
                            list['_parentTicket']['_activeHoldRequest'] != null ? Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text('state'.tr(), style: TextStyle(fontSize: 14, color: textColor)),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    Image(image: AssetImage('assets/image/general/Watch.png'), width: 20, height: 20),
                                    SizedBox(width: 5),
                                    Text('hold'.tr(), style: TextStyle(fontSize: 14, color: primaryColor)),
                                  ],
                                )
                              ],
                            ) : textHorizontal('state'.tr(), U.renderStatus(list['_parentTicket']['currentState'])),
                            SizedBox(height: 16),
                            textHorizontal('description'.tr(), list['_parentTicket'][U.langColumn(context, '_subjectDescription')]??''),
                            SizedBox(height: 16),
                          ],
                        ),
                      ):Container(),
                      separator(),
                      list['autoResponse'] ? Container() : Padding(
                        padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('activity'.tr(), style: TextStyle(color: textColor, fontWeight: FontWeight.w600)),
                            SizedBox(height: 16),

                            list['currentState'] != 'DIBATALKAN' && list['currentState'] != 'DIANTRIKAN' && list['currentState'] != 'DIPROSES' && list['_collaboratorDataFilter'].length > 0?Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('servant'.tr(), style: TextStyle(color: textColor, fontSize: 14)),
                                Container(
                                  padding: EdgeInsets.only(top: 10, left: 16),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text('1. ${list['servantNameStart']??'-'}', style: TextStyle(color: textColor, fontSize: 14), overflow: TextOverflow.ellipsis),
                                      Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: List.generate(list['_collaboratorDataFilter'].length, (i) {
                                          return Text('${i+2}. ${list['_collaboratorDataFilter'][i]['name']}', style: TextStyle(color: textColor, fontSize: 14), overflow: TextOverflow.ellipsis);
                                        }),
                                      )
                                    ],
                                  ),
                                )
                              ],
                            ) : textHorizontal(
                                list['currentState'] == 'DIBATALKAN'?'canceledBy'.tr():'servant'.tr(),
                                list['currentState'] == 'DIBATALKAN'?list['servantNameCancel']??'-':list['currentState'] != 'DIANTRIKAN' && list['currentState'] != 'DIPROSES'?list['servantNameStart']??'-':'-'
                            ),
                            SizedBox(height: 16),
                            divider(opacity: 0.05),
                            SizedBox(height: 16),
                            Text('timeline'.tr(), style: TextStyle(color: textColor, fontSize: 14)),
                            SizedBox(height: 16),

                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                timeline('stateRequested'.tr(), list['datetimeRequest'] != null ? convertDate(list['datetimeRequest'], context.locale.toString()) : '-', null, null, current: list['currentState'] == 'DIANTRIKAN' || list['currentState'] == 'DIPROSES', first: true),
                                list['currentState'] == 'DIMULAI' ? timeline('stateDone'.tr(), list['datetimeStart'] != null ? convertDate(list['datetimeStart'], context.locale.toString()) : '-', list['noteStart'], list['noteStartTranslate'], current: list['currentState'] == 'DIMULAI') : Container(),
                                !list['autoResponse'] && (list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS') ? timeline('startDoing'.tr(), list['datetimeStart'] != null ? convertDate(list['datetimeStart'], context.locale.toString()) : '-', list['noteStart'], list['noteStartTranslate']) : Container(),
                                !list['autoResponse'] && (list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS') ? timeline('stateFinish'.tr(), list['datetimeFinish'] != null ? convertDate(list['datetimeFinish'], context.locale.toString()) : '-', list['noteFinish'], list['noteFinishTranslate'], current: list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS') : Container(),
                                list['autoResponse'] && list['currentState'] == 'TUNTAS' ? timeline('stateFinish'.tr(), list['datetimeComplete'] != null ? convertDate(list['datetimeComplete'], context.locale.toString()) : '-', list['noteComplete'], list['noteCompleteTranslate'], current: list['currentState'] == 'TUNTAS') : Container(),
                                list['currentState'] == 'DIBATALKAN' ? timeline('stateCanceled'.tr(), list['datetimeCancel'] != null ? convertDate(list['datetimeCancel'], context.locale.toString()) : '-', list['noteCancel'], list['noteCancelTranslate'], current: list['currentState'] == 'DIBATALKAN') : Container(),
                              ],
                            ),

                            suspendPanel(list),
                            finish_att_new(list),

                            !list['autoResponse'] && (list['currentState'] == 'TUNTAS' || list['currentState'] == 'DISELESAIKAN') ? Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(height: 16),
                                divider(opacity: 0.05),
                                U.newServerVersion(1716187681) && list['action'] != null && list['action'].trim() != '' ? Column(
                                  children: [
                                    SizedBox(height: 16),
                                    textHorizontal('action'.tr(), list['action'])
                                  ],
                                ) : Container(),
                                SizedBox(height: 16),
                                Row(
                                  children: [
                                    Text('rate'.tr(), style: TextStyle(color: textColor, fontSize: 14)),
                                    Expanded(
                                      child: list['satisfactionRate'] > 0 ? Row(
                                        mainAxisAlignment: MainAxisAlignment.end,
                                        children: [
                                          Text(rating[list['satisfactionRate']-1]['label'].toString(), style: TextStyle(color: textColor, fontSize: 14), overflow: TextOverflow.ellipsis),
                                          SizedBox(width: 5),
                                          Image(image: AssetImage(rating[list['satisfactionRate']-1]['image'].toString()), width: 25),
                                        ],
                                      ) : Text('unrated'.tr(), style: TextStyle(color: textColor, fontSize: 14), textAlign: TextAlign.end, overflow: TextOverflow.ellipsis),
                                    ),
                                  ],
                                ),
                                list['satisfactionRate'] > 0 ? Builder(
                                  builder: (context) {
                                    var aspect = '';
                                    if(context.locale.toString() == 'id' && list['ratingAspectId'] != null){
                                      aspect = list['ratingAspectId'];
                                    } else if(context.locale.toString() == 'en' && list['ratingAspectEn'] != null){
                                      aspect = list['ratingAspectEn'];
                                    } else if(list['ratingAspectOri'] != null){
                                      aspect = list['ratingAspectOri'];
                                    }

                                    return aspect.isNotEmpty ? Column(
                                      children: [
                                        SizedBox(height: 16),
                                        textHorizontal('ratingAspect'.tr(), aspect)
                                      ],
                                    ) : Container();
                                  },
                                ) : Container(),
                              ],
                            ) : Container()
                          ],
                        ),
                      ),
                      list['autoResponse'] ? Container() : separator(),
                    ],
                  ),
                ),
              ):_timeLimit ? showButton(context) : loadingTemplate(() {if(mounted) setState(()=>_timeLimit=true);},),
            ),
            divider(color: primaryColor, opacity: 1.0, thickness: 2.0),
            list.isEmpty || list['autoResponse'] || list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS' || list['currentState'] == 'DIBATALKAN' ? Container() : Container(
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16), color: Colors.white,
              child: list['currentState'] == 'DIMULAI' && list['_canNotCancel'] ? Text('canNotCancel2'.tr(), style: TextStyle(color: textColor, fontSize: 14), textAlign: TextAlign.center) : Container(
                alignment: Alignment.bottomCenter,
                width: U.bodyWidth(context),
                child: SafeArea(
                  child: Column(
                    children: [
                      SizedBox(
                        width: double.infinity,
                        child: TextField(
                          controller: controllerNote,
                          style: const TextStyle(fontSize: 14, color: Colors.black),
                          maxLength: 128,
                          decoration: InputDecoration(
                              counterText: '',
                              counterStyle: TextStyle(color: Colors.transparent, fontSize: 0),
                              hintText: 'addNoteCancel'.tr(),
                              hintStyle: TextStyle(color: textColor.withValues(alpha: 0.5), fontSize: 14),
                              filled: true,
                              fillColor: backgroundColor,
                              hoverColor: Colors.black.withValues(alpha: 0.1),
                              contentPadding: EdgeInsets.all(13),
                              prefixIcon: Padding(padding: EdgeInsets.only(left: 13, right: 13), child: U.iconsax('edit-2', color: textColor, size: 24)),
                              border: InputBorder.none,
                              enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Color(0xff262626).withValues(alpha: 0.5))),
                              focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: primaryColor)),
                              isDense: true
                          ),
                        ),
                      ),
                      SizedBox(height: 10),
                      buttonTemplate(text: 'buttonCancel'.tr(), backgroundColor: textColor.withValues(alpha: 0.1), textColor: textColor.withValues(alpha: 0.75), borderColor: textColor.withValues(alpha: 0.20), action: () => detFunc.cancelRequest(context, list, controllerNote))
                    ],
                  ),
                ),
              ),
            )
          ],
        )
    );
  }

  Widget renderRequested(){
    if(list['receptionistId'] != null){
      if(user['roomAttendant'] != null && user['roomAttendant'] && user['userId'] != list['informantUserId'] && user['userId'] == list['receptionistId']){
        return Column(
          children: [
            textHorizontal('requestedFor'.tr(), list['informantName']??'-'),
            SizedBox(height: 16),
          ],
        );
      }

      if(user['userId'] == list['informantUserId'] && user['userId'] != list['receptionistId']){
        return Column(
          children: [
            textHorizontal('requestedBy'.tr(), list['receptionistName']??'-'),
            SizedBox(height: 16),
          ],
        );
      }
    }

    return Container();
  }

  Widget attachment_new(list){
    var imageWidth = ((U.bodyWidth(context)-32)/5)-5;
    List imageList = [];
    if(list['_attachment'] != null){
      for(var i = 1; i <= 5; i++){
        if(list['_attachment']['_mobileRequestAtt$i'] != null){
          imageList.add({'thumb': list['_attachment']['_mobileRequestThumb$i'], 'image': list['_attachment']['_mobileRequestAtt$i']});
        }
      }
    }

    return imageList.length > 0 ? Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('image'.tr(), style: TextStyle(color: textColor)),
        SizedBox(height: 5),
        Row(
          children: List.generate(imageList.length, (i){
            return GestureDetector(
                child: Container(
                  width: imageWidth, height: imageWidth, alignment: Alignment.topRight,
                  margin: EdgeInsets.only(right: i == 4 ? 0 : 6),
                  decoration: BoxDecoration(
                      color: Colors.black12, borderRadius: BorderRadius.all(Radius.circular(5)), border: Border.all(color: Colors.black26, width: 0.5),
                      image: imageList[i]['thumb'] != null ? DecorationImage(image: NetworkImage(imageList[i]['thumb']), fit: BoxFit.cover) : DecorationImage(image: AssetImage('assets/image/error/ImageNotFound.png'), fit: BoxFit.cover)
                  ),
                ),
                onTap: ()=>navigateTo(context, PhotoPreviewGallery(title: 'image'.tr(), imageList: imageList, startIndex: i))
            );
          }),
        )
      ],
    ) : textVertical('image'.tr(), 'noImgAttach'.tr());
  }

  Widget finish_att_new(list){
    var imageWidth = ((U.bodyWidth(context)-32)/5)-5;
    List imageList = [];

    if((list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS')){
      if(list['_attachment'] != null){
        for(var i = 1; i <= 5; i++){
          if(list['_attachment']['_mobileFinishAtt$i'] != null){
            imageList.add({'thumb': list['_attachment']['_mobileFinishThumb$i'], 'image': list['_attachment']['_mobileFinishAtt$i']});
          }
        }
      }
    }

    return imageList.length > 0 ? Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: 16),
        Text('finishAttachment'.tr(), style: TextStyle(color: textColor)),
        SizedBox(height: 8),
        Row(
          children: List.generate(imageList.length, (i){
            return GestureDetector(
                child: Container(
                  width: imageWidth, height: imageWidth, alignment: Alignment.topRight,
                  margin: EdgeInsets.only(right: i == 4 ? 0 : 6),
                  decoration: BoxDecoration(
                      color: Colors.black12, borderRadius: BorderRadius.all(Radius.circular(5)), border: Border.all(color: Colors.black26, width: 0.5),
                      image: imageList[i]['thumb'] != null ? DecorationImage(image: NetworkImage(imageList[i]['thumb']), fit: BoxFit.cover) : DecorationImage(image: AssetImage('assets/image/error/ImageNotFound.png'), fit: BoxFit.cover)
                  ),
                ),
                onTap: ()=>navigateTo(context, PhotoPreviewGallery(title: 'finishAttachment'.tr(), imageList: imageList, startIndex: i))
            );
          }),
        )
      ],
    ) : Container();
  }

  Widget suspendPanel(list){
    var activeHold = list['_activeHoldRequest'];
    var requestHold = list['_holdRequest'];

    return Column(
      children: [
        activeHold != null ? Padding(padding: EdgeInsets.symmetric(vertical: 15), child: divider(opacity: 0.05)) : Container(),
        activeHold != null ? Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('state'.tr(), style: TextStyle(fontSize: 14, color: textColor)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Image(image: AssetImage('assets/image/general/Watch.png'), width: 20, height: 20),
                    SizedBox(width: 5),
                    Text('hold'.tr(), style: TextStyle(fontSize: 14, color: primaryColor)),
                  ],
                )
              ],
            ),
            SizedBox(height: 16),
            textHorizontal('description'.tr(), activeHold['description'])
          ],
        ) : Container(),

        requestHold == null || requestHold.length == 0 || (requestHold.length == 1 && requestHold[0]['datetimeEnd'] == null) ? Container() : Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(padding: EdgeInsets.symmetric(vertical: 15), child: divider(opacity: 0.05)),
            Text('holdHistory'.tr(), style: TextStyle(fontSize: 14, color: Colors.black)),
            SizedBox(height: 5),
            Column(
              children: List.generate(requestHold.length, (i) {
                return requestHold[i]['datetimeEnd'] != null ? Container(
                  padding: EdgeInsets.symmetric(vertical: 5),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('${i+1}.', style: TextStyle(fontSize: 14, color: Colors.black)),
                      SizedBox(width: 5),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(requestHold[i]['description'], style: TextStyle(fontSize: 14, color: Colors.black), textAlign: TextAlign.start),
                            SizedBox(height: 3),
                            Text('${DateFormat('dd MMM yyyy, HH:mm', context.locale.toString()).format(DateTime.parse(requestHold[i]['datetimeStart']))} - ${DateFormat('dd MMM yyyy, HH:mm', context.locale.toString()).format(DateTime.parse(requestHold[i]['datetimeEnd']))}', style: TextStyle(fontSize: 14, color: primaryColor))
                          ],
                        ),
                      )
                    ],
                  ),
                ) : Container();
              }),
            )
          ],
        )
      ],
    );
  }

  Widget timeline(label, text, note, noteTranslate, {bool first = false, bool current = false}) {
    return TimelineTile(
      nodeAlign: TimelineNodeAlign.start,
      contents: Container(
        margin: EdgeInsets.fromLTRB(16, 10, 16, 10),
        child: Row(
          children: [
            Text(label, style: TextStyle(fontSize: 14, color: textColor.withValues(alpha: 0.85))),
            SizedBox(width: 5),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(text, style: TextStyle(fontSize: 13, color: textColor)),
                  note != null && note != '' ? Text(note, style: TextStyle(fontSize: 12, color: primaryColor), textAlign: TextAlign.right) : Container(),
                  U.autoTranslate() && noteTranslate != null && noteTranslate != '' && note != noteTranslate ? Container(
                    margin: EdgeInsets.only(top: 1), decoration: BoxDecoration(border: Border(top: BorderSide(color: primaryColor.withValues(alpha: 0.3)))),
                    child: Text('($noteTranslate)', style: TextStyle(fontSize: 12, color: primaryColor.withValues(alpha: 0.7), fontStyle: FontStyle.italic), textAlign: TextAlign.right),
                  ) : Container(),
                ],
              ),
            ),
          ],
        ),
      ),
      node: TimelineNode(
        indicator: DotIndicator(color: current ? primaryColor : Color(0xffE8E8E8)),
        startConnector: SolidLineConnector(color: first ? Colors.transparent : Color(0xffE8E8E8)),
        endConnector: SolidLineConnector(color: current ? Colors.transparent : Color(0xffE8E8E8)),
      ),
    );
  }
}