transaction_card.dart

Go to the documentation of this file.

import 'package:connect/core/localization/app_localizations.dart';
 
import '../../../../../../../../../../core/utils/number_conversion.dart';
import '/features/collections/domain/entities/collection_entity.dart';
import '/features/collections/presentation/screens/transaction_history_screen/views/competed_transactions_view/views/transactions_summary_view/widgets/transaction_card_details.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hugeicons/hugeicons.dart';
 
import 'package:intl/intl.dart';
 
class TransactionCard extends StatelessWidget {
  const TransactionCard({
    super.key,
    required this.collection,
    this.showToBePaidLabel = false,
  });
 
  final CollectionEntity collection;
  final bool showToBePaidLabel;
 
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.transparent,
        padding: EdgeInsets.symmetric(horizontal: 10.sp, vertical: 15.sp),
      ),
      onPressed: () {
        showModalBottomSheet(
          context: context,
          backgroundColor: Colors.transparent,
          isScrollControlled: true,
          elevation: 0.0,
          builder: (BuildContext context) {
            return Padding(
              padding: EdgeInsets.all(10.sp),
              child: TransactionCardDetails(collection: collection),
            );
          },
        );
      },
      child: Table(
        columnWidths: const {
          0: FixedColumnWidth(65),
          1: FixedColumnWidth(10),
          3: FixedColumnWidth(100),
        },
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
        children: [
          TableRow(
            children: [
              Text(
                NumberConversionService.convertAndFormatWeight(
                    collection.orderLines?.first.productQty),
                //  '${NumberFormat.compact().format(collection.orderLines?.first.productQty)} Kg',
                style: Theme.of(context).textTheme.displaySmall?.copyWith(
                      color: Theme.of(context).colorScheme.primary,
                      fontWeight: FontWeight.bold,
                      fontSize: 13.5.sp,
                    ),
              ),
              SizedBox(
                height: 30.sp,
                child: const VerticalDivider(),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10.sp),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '${collection.name}',
                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
                            fontSize: 13.sp,
                          ),
                    ),
                    SizedBox(height: 3.sp),
                    Text(
                      collection.dateOrder == null
                          ? ''
                          : DateFormat('MMM d, y')
                              .format(collection.dateOrder!),
                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
                            fontSize: 10.5.sp,
                            color: Theme.of(context)
                                .colorScheme
                                .onSurface
                                .withOpacity(0.7),
                          ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 5.sp),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    PercentageProgressBar(
                      total:
                          collection.orderLines?.first.productQty?.toDouble() ??
                              0,
                      actual: collection.orderLines?.first.qtyReceived
                              ?.toDouble() ??
                          0,
                    ),
                    SizedBox(height: 10.sp),
                    Opacity(
                      opacity: 0.7,
                      child: showToBePaidLabel
                          ? Text(
                              AppLocalizations.of(context)
                                  .translate('To be paid'),
                              style: Theme.of(context)
                                  .textTheme
                                  .bodySmall
                                  ?.copyWith(
                                    color: Theme.of(context).hintColor,
                                    fontSize: 10.sp,
                                  ),
                            )
                          : Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Text(
                                  AppLocalizations.of(context)
                                      .translate('show more'),
                                  style: Theme.of(context)
                                      .textTheme
                                      .bodySmall
                                      ?.copyWith(
                                        fontSize: 8.sp,
                                        color: Theme.of(context)
                                            .colorScheme
                                            .onSurface,
                                      ),
                                ),
                                SizedBox(width: 5.sp),
                                Icon(
                                  HugeIcons.strokeRoundedArrowRight02,
                                  color:
                                      Theme.of(context).colorScheme.onSurface,
                                  size: 12.sp,
                                ),
                              ],
                            ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
 
class PercentageProgressBar extends StatelessWidget {
  final double actual;
  final double total;
 
  const PercentageProgressBar({
    super.key,
    required this.actual,
    required this.total,
  });
 
  @override
  Widget build(BuildContext context) {
    double percentage = (actual / total).clamp(0.0, 1.0);
 
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          width: 50.sp,
          child: LinearProgressIndicator(
            value: percentage,
            minHeight: 2,
            backgroundColor:
                Theme.of(context).colorScheme.primary.withOpacity(0.11),
            valueColor: AlwaysStoppedAnimation<Color>(
              Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
        SizedBox(width: 7.sp),
        Text(
          '${(percentage * 100).toStringAsFixed(0)}%',
          style: Theme.of(context).textTheme.displaySmall?.copyWith(
                fontSize: 7.5.sp,
              ),
        ),
      ],
    );
  }
}