today_collections.dart

Go to the documentation of this file.

import 'dart:ui';
 
import 'package:easy_localization/easy_localization.dart';
import 'package:fluentui_system_icons/fluentui_system_icons.dart';
import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.dart';
 
import '../../../../../core/ui/theme/color_palette.dart';
 
class TodayCollections extends StatelessWidget {
  final String completedPercentage;
  final String totalCollections;
  final String collectionsVolume;
  final String done;
  final String canceled;
  final String pendingCollections;
  final bool isPeriodSection;
 
  const TodayCollections({
    super.key,
    required this.completedPercentage,
    required this.totalCollections,
    required this.collectionsVolume,
    required this.done,
    required this.canceled,
    required this.pendingCollections,
    this.isPeriodSection = false,
 
  });
 
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            ColorPalette.white,
            ColorPalette.antiFlashWhite.withValues(alpha: 0.5),
          ],
        ),
        borderRadius: BorderRadius.circular(24),
        boxShadow: [
          BoxShadow(
            color: ColorPalette.black.withValues(alpha: 0.05),
            blurRadius: 20,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(24),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(
            padding: const EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: ColorPalette.white.withValues(alpha: 0.9),
              borderRadius: BorderRadius.circular(24),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                !isPeriodSection ? Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "dashboard.today_collections".tr(),
                          style: Theme.of(context).textTheme.titleLarge?.copyWith(
                            color: ColorPalette.darkGrey,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 4),
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 12,
                            vertical: 6,
                          ),
                          decoration: BoxDecoration(
                            color: ColorPalette.lightGreen.withValues(alpha: 0.1),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: Text(
                            DateFormat('dd MMM yyyy').format(DateTime.now()),
                            style: const TextStyle(
                              color: ColorPalette.lightGreen,
                              fontWeight: FontWeight.w600,
                              fontSize: 14,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ) : SizedBox.shrink(),
                !isPeriodSection ? const SizedBox(height: 32) : SizedBox.shrink(),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // _buildCollectionItem(
                    //   "Collections",
                    //   totalCollections,
                    //   ColorPalette.lightGreen,
                    //   FluentIcons.checkmark_circle_12_regular,
                    // ),
                    // const SizedBox(height: 20),
                    // _buildCollectionItem(
                    //   "Volume",
                    //   "$collectionsVolume KG",
                    //   ColorPalette.blue,
                    //   FluentIcons.drop_12_regular,
                    // ),
                    Container(
                      padding: const EdgeInsets.all(16),
                      child: CircularPercentIndicator(
                        radius: 55.0,
                        lineWidth: 10.0,
                        percent: double.parse(completedPercentage) / 100,
                        center: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "$completedPercentage%",
                              style: TextStyle(
                                fontSize: 19,
                                fontWeight: FontWeight.bold,
                                color: ColorPalette.darkGrey,
                              ),
                            ),
                            Text(
                              "dashboard.completed".tr(),
                              style: TextStyle(
                                fontSize: 12,
                                color: ColorPalette.grey,
                              ),
                            ),
                          ],
                        ),
                        progressColor: ColorPalette.lightGreen,
                        backgroundColor: ColorPalette.lightGreen.withValues(alpha: 0.1),
                        circularStrokeCap: CircularStrokeCap.round,
                      ),
                    ),
                    const SizedBox(width: 24),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          _buildCollectionItem(
                            "dashboard.done".tr(),
                            done,
                            ColorPalette.lightGreen,
                            FluentIcons.checkmark_circle_12_regular,
                          ),
                          const SizedBox(height: 20),
                          _buildCollectionItem(
                            "dashboard.volume".tr(),
                            collectionsVolume,
                            ColorPalette.blue,
                            FluentIcons.drop_12_regular,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 24),
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: ColorPalette.antiFlashWhite,
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          _buildStatusItem(
                            ColorPalette.lightGreen,
                            totalCollections,
                            "dashboard.total".tr(),
                          ),
                          Container(
                            width: 1,
                            height: 40,
                            color: ColorPalette.grey.withValues(alpha: 0.2),
                          ),
                          _buildStatusItem(
                            ColorPalette.orange,
                            canceled,
                            "dashboard.canceled".tr(),
                          ),
                        ],
                      ),
                      !isPeriodSection ? const SizedBox(height: 16) : SizedBox.shrink(),
                      !isPeriodSection ? Row(
                        children: [
                          Icon(
                            Icons.timer_outlined,
                            size: 20,
                            color: ColorPalette.grey,
                          ),
                          SizedBox(width: 8),
                          Text(
                            // "Pending collections: ",
                            "dashboard.pending_collections".tr(),
                            style: TextStyle(
                              color: ColorPalette.grey,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            pendingCollections,
                            style: TextStyle(
                              color: ColorPalette.darkGrey,
                              fontWeight: FontWeight.bold,
                              fontSize: 14,
                            ),
                          ),
                        ],
                      ) : SizedBox.shrink(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
 
  Widget _buildCollectionItem(
    String label,
    String value,
    Color valueColor,
    IconData icon,
  ) {
    // Format the value if it's for Volume
    if (label == "Volume") {
      try {
        // Extract the numeric part, handling cases where unit might or might not be present
        double numericValue;
        if (value.contains("KG")) {
          numericValue = double.parse(value.replaceAll(" KG", ""));
        } else if (value.contains("MT")) {
          numericValue = double.parse(value.replaceAll(" MT", "")) * 1000;
        } else {
          // No unit present, assume it's a raw number
          numericValue = double.parse(value);
        }
        
        // Format based on value
        if (numericValue >= 1000) {
          // Convert to metric tons
          value = "${(numericValue / 1000).toStringAsFixed(2)} MT";
        } else {
          // Ensure values under 1000 show KG
          value = "$numericValue KG";
        }
      } catch (e) {
        // Keep original value if parsing fails
        if (!value.contains("KG") && !value.contains("MT")) {
          value = "$value KG"; // Add KG if no unit is present
        }
      }
    }
    
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: valueColor.withValues(alpha: 0.1),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Row(
        children: [
          Icon(icon, color: valueColor),
          const SizedBox(width: 12),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                label,
                style: const TextStyle(
                  color: ColorPalette.grey,
                  fontSize: 14,
                ),
              ),
              Text(
                value,
                style: TextStyle(
                  color: valueColor,
                  fontWeight: FontWeight.bold,
                  fontSize: 17,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
 
  Widget _buildStatusItem(Color color, String value, String label) {
    return Row(
      children: [
        Container(
          width: 40,
          height: 40,
          decoration: BoxDecoration(
            color: color.withValues(alpha: 0.1),
            shape: BoxShape.circle,
          ),
          child: Center(
            child: Text(
              value,
              style: TextStyle(
                color: color,
                fontWeight: FontWeight.bold,
                fontSize: 16,
              ),
            ),
          ),
        ),
        const SizedBox(width: 8),
        Text(
          label,
          style: const TextStyle(
            color: ColorPalette.grey,
            fontSize: 14,
          ),
        ),
      ],
    );
  }
}