From 95d0bb4059c5af9fa0191d0f825670a167976e26 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Mon, 20 Jul 2026 11:04:52 +0300 Subject: [PATCH] demo request ui ux improvement --- .../demo_module/create_demo_request_page.dart | 165 ++++++++---------- .../demo_module/demo_detail_view_page.dart | 67 ++++--- 2 files changed, 103 insertions(+), 129 deletions(-) diff --git a/lib/modules/demo_module/create_demo_request_page.dart b/lib/modules/demo_module/create_demo_request_page.dart index a921ed91..4ff8f3ff 100644 --- a/lib/modules/demo_module/create_demo_request_page.dart +++ b/lib/modules/demo_module/create_demo_request_page.dart @@ -43,6 +43,8 @@ import 'package:test_sa/providers/gas_request_providers/site_provider.dart'; import 'package:test_sa/providers/loading_list_notifier.dart'; import 'package:test_sa/providers/work_order/vendor_provider.dart'; import 'package:test_sa/views/widgets/images/multi_image_picker.dart'; +import 'package:test_sa/views/widgets/item_views/info_header_widget.dart'; +import 'package:test_sa/views/widgets/item_views/info_text_widget.dart'; import '../../../../../../new_views/common_widgets/default_app_bar.dart'; import '../../models/new_models/department.dart'; import 'demo_detail_view_page.dart'; @@ -92,76 +94,23 @@ class _CreateDemoRequestPageState extends State with Tick SingleChildScrollView( padding: const EdgeInsets.all(16), child: Column( + spacing: 12, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ - // SingleItemDropDownMenu( - // context: context, - // title: "Demo Period", - // initialValue: demoPeriodLookup, - // showShadow: false, - // validator: (value) { - // if (value == null) return "Mandatory"; - // return null; - // }, - // backgroundColor: AppColor.fieldBgColor(context), - // showAsBottomSheet: true, - // onSelect: (value) { - // demoPeriodLookup = value; - // setState(() {}); - // }, - // ), - // 16.height, ...siteSection(), - 16.height, ...doctorInfoSection(), - 16.height, ...assetSection(), - 16.height, ...vendorDetailsSection(), - 16.height, - "Attachments".bodyText(context).custom(color: AppColor.black10), - 8.height, - SingleItemDropDownMenu( - context: context, - height: 56.toScreenHeight, - title: "Document Type", - initialValue: demoDocumentLookup, - showShadow: false, - validator: (value) { - if (value == null) return "Mandatory"; - return null; - }, - backgroundColor: AppColor.fieldBgColor(context), - showAsBottomSheet: true, - onSelect: (value) { - demoDocumentLookup = value; - setState(() {}); - }, - ), - 16.height, - AttachmentPicker( - label: context.translation.attachments, - attachment: _attachments, - buttonColor: AppColor.black10.withOpacity(demoDocumentLookup != null ? 1 : .4), - onlyImages: false, - enabled: demoDocumentLookup != null, - documentType: demoDocumentLookup, - showAsListView: true, - buttonIcon: 'image-plus'.toSvgAsset(color: (AppColor.primary10).withOpacity(demoDocumentLookup != null ? 1 : .4)), - onChange: (attachments) { - _attachments = attachments; - setState(() {}); - }, - ), - 16.height, + ...attachmentSection(), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Checkbox( value: _demoFormModel.demoEaluationAcknowledge, - visualDensity: const VisualDensity(horizontal: -4, vertical: -4), - activeColor: AppColor.blueStatus(context), + activeColor: AppColor.primary10, + side: BorderSide(color: AppColor.loadingColor(context), width: 1.0), + visualDensity: const VisualDensity(horizontal: -4.0, vertical: -4.0), materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, onChanged: (value) { setState(() { @@ -172,24 +121,29 @@ class _CreateDemoRequestPageState extends State with Tick Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, + spacing: 4, children: [ - "DEMO outcome evaluation form acknowledgement".bodyText(context).custom(color: context.isDark ? AppColor.primary50 : AppColor.neutral50), - 4.height, - "I acknowledge at the end of the trial period I will complete and submit the Medical Technology Trial Outcome Form within two weeks." - .tinyFont(context) - .custom(color: context.isDark ? AppColor.primary50 : AppColor.neutral120), + InfoTextLabelWidget( + label: "DEMO outcome evaluation form acknowledgement", + textStyle: AppTextStyles.bodyText, + color: AppColor.textColor(context), + ), + InfoTextLabelWidget( + label: "I acknowledge at the end of the trial period I will complete and submit the Medical Technology Trial Outcome Form within two weeks.", + color: AppColor.lightTextColor(context), + ), ], ).expanded, ], ), - 16.height, Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Checkbox( value: _demoFormModel.acknowledgeNotEquipment, - visualDensity: const VisualDensity(horizontal: -4, vertical: -4), - activeColor: AppColor.blueStatus(context), + activeColor: AppColor.primary10, + side: BorderSide(color: AppColor.loadingColor(context), width: 1.0), + visualDensity: const VisualDensity(horizontal: -4.0, vertical: -4.0), materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, onChanged: (value) { setState(() { @@ -200,18 +154,23 @@ class _CreateDemoRequestPageState extends State with Tick Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, + spacing: 4, children: [ - "Acknowledgement of not using the equipment".bodyText(context).custom(color: context.isDark ? AppColor.primary50 : AppColor.neutral50), - 4.height, - "I acknowledge at the end of the trial period I will not use the DEMO medical equipment & I will not book any patient on the DEMO medical equipment." - .tinyFont(context) - .custom(color: context.isDark ? AppColor.primary50 : AppColor.neutral120), + InfoTextLabelWidget( + label: "Acknowledgement of not using the equipment", + textStyle: AppTextStyles.bodyText, + color: AppColor.textColor(context), + ), + InfoTextLabelWidget( + label: "I acknowledge at the end of the trial period I will not use the DEMO medical equipment & I will not book any patient on the DEMO medical equipment.", + color: AppColor.lightTextColor(context), + ), ], ).expanded, ], ), ], - ).toShadowContainer(context, borderRadius: 20), + ).toShadowContainer(context), ).expanded, FooterActionButton.footerContainer( context: context, @@ -231,8 +190,7 @@ class _CreateDemoRequestPageState extends State with Tick List siteSection() { return [ - 'Site Details'.addTranslation.bodyText(context).custom(color: AppColor.black10), - 8.height, + InfoHeader16Widget('Site Details'.addTranslation), SingleItemDropDownMenu( context: context, title: context.translation.site, @@ -252,7 +210,6 @@ class _CreateDemoRequestPageState extends State with Tick setState(() {}); }, ), - 8.height, SingleItemDropDownMenu( context: context, title: context.translation.building, @@ -273,7 +230,6 @@ class _CreateDemoRequestPageState extends State with Tick setState(() {}); }, ), - 8.height, SingleItemDropDownMenu( context: context, title: context.translation.floor, @@ -293,7 +249,6 @@ class _CreateDemoRequestPageState extends State with Tick setState(() {}); }, ), - 8.height, SingleItemDropDownMenu( context: context, title: context.translation.department, @@ -318,8 +273,7 @@ class _CreateDemoRequestPageState extends State with Tick List doctorInfoSection() { return [ - "Doctor Details".bodyText(context).custom(color: AppColor.black10), - 8.height, + InfoHeader16Widget('Doctor Details'.addTranslation), AppTextFormField( initialValue: "", labelText: "Name", @@ -336,7 +290,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.docName = value; }, ), - 8.height, AppTextFormField( initialValue: "", labelText: "Contact Number", @@ -353,7 +306,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.docNumber = value; }, ), - 8.height, AppTextFormField( initialValue: "", labelText: "Email", @@ -373,7 +325,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.docEmail = value; }, ), - 8.height, AppTextFormField( labelText: "Item Description", validator: (value) { @@ -391,7 +342,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.itemDescription = value; }, ), - 8.height, AppTextFormField( labelText: "Request Description", // validator: (value) { @@ -414,8 +364,7 @@ class _CreateDemoRequestPageState extends State with Tick List assetSection() { return [ - 'Asset Details'.addTranslation.bodyText(context).custom(color: AppColor.black10), - 8.height, + InfoHeader16Widget('Asset Details'.addTranslation), AppTextFormField( labelText: "Asset Name", validator: (value) { @@ -433,7 +382,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.assetName = value; }, ), - 8.height, AppTextFormField( labelText: "Model", validator: (value) { @@ -451,7 +399,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.model = value; }, ), - 8.height, AppTextFormField( labelText: "Manufacturer", validator: (value) { @@ -469,7 +416,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.manufacturer = value; }, ), - 8.height, SingleItemDropDownMenu( context: context, height: 56.toScreenHeight, @@ -492,8 +438,7 @@ class _CreateDemoRequestPageState extends State with Tick List vendorDetailsSection() { return [ - 'Vendor Details'.addTranslation.bodyText(context).custom(color: AppColor.black10), - 8.height, + InfoHeader16Widget('Vendor Details'.addTranslation), AppTextFormField( labelText: 'Vendor Name'.addTranslation, style: Theme.of(context).textTheme.titleMedium, @@ -506,7 +451,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.vendorName = value; }, ), - 8.height, AppTextFormField( labelText: 'Representative Name'.addTranslation, style: Theme.of(context).textTheme.titleMedium, @@ -519,7 +463,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.vendorRepresentativeName = value; }, ), - 8.height, AppTextFormField( // controller: vendorPhoneController, labelText: "Contact Number", @@ -533,7 +476,6 @@ class _CreateDemoRequestPageState extends State with Tick _demoFormModel.vendorContactNumber = value; }, ), - 8.height, AppTextFormField( labelText: "Email", // controller: vendorEmailController, @@ -550,6 +492,43 @@ class _CreateDemoRequestPageState extends State with Tick ]; } + List attachmentSection() { + return [ + InfoHeader16Widget('Attachments'.addTranslation), + SingleItemDropDownMenu( + context: context, + height: 56.toScreenHeight, + title: "Document Type", + initialValue: demoDocumentLookup, + showShadow: false, + validator: (value) { + if (value == null) return "Mandatory"; + return null; + }, + backgroundColor: AppColor.fieldBgColor(context), + showAsBottomSheet: true, + onSelect: (value) { + demoDocumentLookup = value; + setState(() {}); + }, + ), + AttachmentPicker( + label: context.translation.attachments, + attachment: _attachments, + buttonColor: AppColor.primary10.withOpacity(demoDocumentLookup != null ? 1 : .4), + onlyImages: false, + enabled: demoDocumentLookup != null, + documentType: demoDocumentLookup, + showAsListView: true, + buttonIcon: 'image-plus'.toSvgAsset(color: (AppColor.primary10).withOpacity(demoDocumentLookup != null ? 1 : .4)), + onChange: (attachments) { + _attachments = attachments; + setState(() {}); + }, + ), + ]; + } + Future _submit() async { FocusScope.of(context).unfocus(); if (_formKey.currentState!.validate()) { diff --git a/lib/modules/demo_module/demo_detail_view_page.dart b/lib/modules/demo_module/demo_detail_view_page.dart index cac6e356..6d98e438 100644 --- a/lib/modules/demo_module/demo_detail_view_page.dart +++ b/lib/modules/demo_module/demo_detail_view_page.dart @@ -16,6 +16,8 @@ import 'package:test_sa/modules/loan_module/models/loan_attachment_model.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/common_widgets/app_filled_button.dart'; import 'package:test_sa/new_views/swipe_module/dialoge/acknowledge_work_dialog.dart'; +import 'package:test_sa/views/widgets/item_views/info_header_widget.dart'; +import 'package:test_sa/views/widgets/item_views/info_text_widget.dart'; import 'package:test_sa/views/widgets/loaders/no_data_found.dart'; import '../../controllers/api_routes/urls.dart'; @@ -111,7 +113,6 @@ class _DemoDetailViewPageState extends State { ), 8.height, ], - 12.height, ...requesterDetails(context, demoData), const Divider().defaultStyle(context), ...requestDetails(context, demoData), @@ -123,10 +124,7 @@ class _DemoDetailViewPageState extends State { ...vendorDetails(context, demoData), if (allAttachments.isNotEmpty) ...[ const Divider().defaultStyle(context), - Text( - "Attachments".addTranslation, - style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50), - ), + InfoHeader16Widget("Attachments"), FilesList( showAsListView: true, images: allAttachments.map((e) => URLs.getFileUrl(e.attachmentName ?? '') ?? '').toList(), @@ -134,10 +132,7 @@ class _DemoDetailViewPageState extends State { ], if (suppAttachments.isNotEmpty) ...[ const Divider().defaultStyle(context), - Text( - "Supplier Attachments".addTranslation, - style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50), - ), + InfoHeader16Widget("Supplier Attachments"), FilesList( showAsListView: true, images: suppAttachments.map((e) => URLs.getFileUrl(e.attachmentName ?? '') ?? '').toList(), @@ -191,53 +186,53 @@ class _DemoDetailViewPageState extends State { List requestDetails(BuildContext context, DemoRequestModel? model) { return [ - Text("Request Details", style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50)), - 'Request No: ${model?.requestNo ?? "-"}'.bodyText(context), - 'Demo No: ${model?.demoNo ?? "-"}'.bodyText(context), - 'Demo Period: ${model?.demoPeriod?.name ?? "-"}'.bodyText(context), - '${context.translation.site}: ${model?.site?.custName ?? "-"}'.bodyText(context), - '${context.translation.building}: ${model?.building?.name ?? "-"}'.bodyText(context), - '${context.translation.floor}: ${model?.floor?.name ?? "-"}'.bodyText(context), - '${context.translation.department}: ${model?.department?.departmentName ?? "-"}'.bodyText(context), - 'Item Description: ${model?.itemDescription ?? "-"}'.bodyText(context), - 'Request Description: ${model?.requestDescription ?? "-"}'.bodyText(context), + InfoHeader16Widget("Request Information"), + InfoTextWidget(label: "Request No", value: model?.requestNo ?? "-", copyValue: true), + InfoTextWidget(label: "Demo No", value: model?.demoNo ?? "-"), + InfoTextWidget(label: "Demo Period", value: model?.demoPeriod?.name ?? "-"), + InfoTextWidget(label: context.translation.site, value: model?.site?.custName ?? "-"), + InfoTextWidget(label: context.translation.building, value: model?.building?.name ?? "-"), + InfoTextWidget(label: context.translation.floor, value: model?.floor?.name ?? "-"), + InfoTextWidget(label: context.translation.department, value: model?.department?.departmentName ?? "-"), + InfoTextWidget(label: "Item Description", value: model?.itemDescription ?? "-"), + InfoTextWidget(label: "Request Description", value: model?.requestDescription ?? "-"), ]; } List vendorDetails(BuildContext context, DemoRequestModel? model) { return [ - Text("Vendor Information", style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50)), - 'Name: ${model?.supplier?.name ?? model?.vendorName ?? "-"}'.bodyText(context), - 'Representative Name: ${model?.suppPerson?.name ?? model?.vendorRepresentativeName ?? "-"}'.bodyText(context), - 'Contact: ${model?.supplier?.contact ?? model?.vendorContactNumber ?? "-"}'.bodyText(context), - 'Email: ${model?.supplier?.email ?? model?.vendorEmail ?? "-"}'.bodyText(context), + InfoHeader16Widget("Vendor Information"), + InfoTextWidget(label: "Name", value: model?.supplier?.name ?? model?.vendorName ?? "-"), + InfoTextWidget(label: "Representative Name", value: model?.suppPerson?.name ?? model?.vendorRepresentativeName ?? "-"), + InfoTextWidget(label: "Contact", value: model?.supplier?.contact ?? model?.vendorContactNumber ?? "-"), + InfoTextWidget(label: "Email", value: model?.supplier?.email ?? model?.vendorEmail ?? "-"), ]; } List assetDetails(BuildContext context, DemoRequestModel? model) { return [ - Text("Asset Information", style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50)), - '${context.translation.assetName}: ${model?.assetName ?? "-"}'.bodyText(context), - '${context.translation.manufacture}: ${model?.manufacturer ?? "-"}'.bodyText(context), - '${context.translation.model}: ${model?.model ?? "-"}'.bodyText(context), + InfoHeader16Widget("Asset Information"), + InfoTextWidget(label: context.translation.assetName, value: model?.assetName ?? "-"), + InfoTextWidget(label: context.translation.manufacture, value: model?.manufacturer ?? "-"), + InfoTextWidget(label: context.translation.model, value: model?.model ?? "-"), ]; } List doctorDetails(BuildContext context, DemoRequestModel? model) { return [ - Text("Doctor Information", style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50)), - 'Name: ${model?.doctorName ?? "-"}'.bodyText(context), - 'Contact: ${model?.doctorContactNumber ?? "-"}'.bodyText(context), - 'Email: ${model?.doctorContactEmail ?? "-"}'.bodyText(context), + InfoHeader16Widget("Doctor Information"), + InfoTextWidget(label: "Name", value: model?.doctorName ?? "-"), + InfoTextWidget(label: "Contact", value: model?.doctorContactNumber ?? "-"), + InfoTextWidget(label: "Email", value: model?.doctorContactEmail ?? "-"), ]; } List requesterDetails(BuildContext context, DemoRequestModel? model) { return [ - Text("Requester Information", style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50)), - 'Name: ${model?.requesterUser?.requesterName ?? "-"}'.bodyText(context), - 'Email: ${model?.requesterUser?.requesterEmail ?? "-"}'.bodyText(context), - 'Contact: ${model?.requesterUser?.requesterMobile ?? "-"}'.bodyText(context), + InfoHeader16Widget("Requester Information"), + InfoTextWidget(label: "Name", value: model?.requesterUser?.requesterName ?? "-"), + InfoTextWidget(label: "Email", value: model?.requesterUser?.requesterEmail ?? "-"), + InfoTextWidget(label: "Contact", value: model?.requesterUser?.requesterMobile ?? "-"), // 'Extension: ${loanData.requesterExtensionNo ?? "-"}'.bodyText(context), ]; }