From ca60e03c1e1b55478f87a23b704571026815fc9f Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Tue, 3 Mar 2026 21:25:21 -0500 Subject: [PATCH] feat: Refactor benefit card components for improved styling and performance --- .../benefits_overview/benefit_card.dart | 52 ++++--------------- .../benefit_card_header.dart | 23 +++----- .../circular_progress_painter.dart | 7 +-- .../widgets/benefits_overview/stat_chip.dart | 6 +-- 4 files changed, 26 insertions(+), 62 deletions(-) diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card.dart index fac3ed40..1294f979 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card.dart @@ -2,9 +2,7 @@ import 'package:core_localization/core_localization.dart'; import 'package:design_system/design_system.dart'; import 'package:flutter/material.dart'; import 'package:krow_domain/krow_domain.dart'; -import 'package:staff_home/src/presentation/widgets/benefits_overview/accordion_history.dart'; import 'package:staff_home/src/presentation/widgets/benefits_overview/benefit_card_header.dart'; -import 'package:staff_home/src/presentation/widgets/benefits_overview/compliance_banner.dart'; /// Card widget displaying detailed benefit information. class BenefitCard extends StatelessWidget { @@ -25,51 +23,23 @@ class BenefitCard extends StatelessWidget { return Container( padding: const EdgeInsets.all(UiConstants.space6), decoration: BoxDecoration( - color: Colors.white, + color: UiColors.white, borderRadius: UiConstants.radiusLg, - border: Border.all(color: UiColors.border.withOpacity(0.5)), - boxShadow: [ - BoxShadow( - color: UiColors.black.withOpacity(0.02), - blurRadius: 10, - offset: const Offset(0, 4), - ), - ], + border: Border.all(color: UiColors.border, width: 0.5), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ BenefitCardHeader(benefit: benefit), - const SizedBox(height: UiConstants.space6), - if (isSickLeave) ...[ - AccordionHistory(label: i18n.sick_leave_history), - const SizedBox(height: UiConstants.space6), - ], - if (isVacation || isHolidays) ...[ - ComplianceBanner(text: i18n.compliance_banner), - const SizedBox(height: UiConstants.space6), - ], - SizedBox( - width: double.infinity, - child: UiButton.primary( - text: i18n.request_payment(benefit: benefit.title), - style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFF0038A8), - padding: const EdgeInsets.symmetric(vertical: 16), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8), - ), - ), - onPressed: () { - // TODO: Implement payment request - UiSnackbar.show( - context, - message: i18n.request_submitted(benefit: benefit.title), - type: UiSnackbarType.success, - ); - }, - ), - ), + // const SizedBox(height: UiConstants.space6), + // if (isSickLeave) ...[ + // AccordionHistory(label: i18n.sick_leave_history), + // const SizedBox(height: UiConstants.space6), + // ], + // if (isVacation || isHolidays) ...[ + // ComplianceBanner(text: i18n.compliance_banner), + // const SizedBox(height: UiConstants.space6), + // ], ], ), ); diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card_header.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card_header.dart index 54791f75..3be875c0 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card_header.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card_header.dart @@ -29,11 +29,13 @@ class BenefitCardHeader extends StatelessWidget { benefit.title, style: UiTypography.body1b.textPrimary, ), - const SizedBox(height: 4), - Text( - _getSubtitle(benefit.title), - style: UiTypography.footnote2r.textSecondary, - ), + if (_getSubtitle(benefit.title).isNotEmpty) ...[ + const SizedBox(height: UiConstants.space2), + Text( + _getSubtitle(benefit.title), + style: UiTypography.body3r.textSecondary, + ), + ], const SizedBox(height: UiConstants.space4), _buildStatsRow(i18n), ], @@ -48,19 +50,12 @@ class BenefitCardHeader extends StatelessWidget { ? (benefit.remainingHours / benefit.entitlementHours) : 0.0; - final bool isSickLeave = benefit.title.toLowerCase().contains('sick'); - final Color circleColor = - isSickLeave ? const Color(0xFF2563EB) : const Color(0xFF10B981); - return SizedBox( width: 72, height: 72, child: CustomPaint( painter: CircularProgressPainter( progress: progress, - color: circleColor, - backgroundColor: const Color(0xFFE2E8F0), - strokeWidth: 6, ), child: Center( child: Column( @@ -72,9 +67,7 @@ class BenefitCardHeader extends StatelessWidget { ), Text( t.client_billing.hours_suffix, - style: UiTypography.footnote2r.textTertiary.copyWith( - fontSize: 9, - ), + style: UiTypography.footnote1r.textSecondary ), ], ), diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/circular_progress_painter.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/circular_progress_painter.dart index bb3dd55b..9ec1ca86 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/circular_progress_painter.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/circular_progress_painter.dart @@ -1,5 +1,6 @@ import 'dart:math' as math; +import 'package:design_system/design_system.dart'; import 'package:flutter/material.dart'; /// Custom painter for circular progress indicators. @@ -11,9 +12,9 @@ class CircularProgressPainter extends CustomPainter { CircularProgressPainter({ required this.progress, - required this.color, - required this.backgroundColor, - required this.strokeWidth, + this.strokeWidth = UiConstants.space2, + this.color = UiColors.primary, + this.backgroundColor = UiColors.primaryInverse, }); @override diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/stat_chip.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/stat_chip.dart index 8f551871..dd14350f 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/stat_chip.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/stat_chip.dart @@ -22,7 +22,7 @@ class StatChip extends StatelessWidget { return Container( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), decoration: BoxDecoration( - color: const Color(0xFFF1F5F9), + color: UiColors.primaryForeground, borderRadius: BorderRadius.circular(6), ), child: Column( @@ -31,11 +31,11 @@ class StatChip extends StatelessWidget { children: [ Text( label, - style: UiTypography.footnote2r.textTertiary.copyWith(fontSize: 10), + style: UiTypography.footnote2r.textSecondary, ), Text( '$value ${t.staff.home.benefits.overview.hours}', - style: UiTypography.footnote2b.textPrimary.copyWith(fontSize: 12), + style: UiTypography.footnote1b.textPrimary, ), ], ),