settings_screen.dart

Go to the documentation of this file.

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
 
import '../../core/api/api_client.dart';
import '../../core/services/service_locator.dart';
import '../../core/services/user_info_service.dart';
import '../../core/ui/theme/color_palette.dart';
import '../../core/ui/widgets/custom_scaffold.dart';
import '../../core/ui/widgets/logo_header.dart';
import '../auth/presentation/bloc/authentication_bloc/authentication_bloc.dart';
import 'models/document_model.dart';
import 'screens/pdf_viewer_screen.dart';
import 'services/document_service.dart';
 
class ProfileSettingsScreen extends StatefulWidget {
  const ProfileSettingsScreen({super.key});
 
  @override
  State<ProfileSettingsScreen> createState() => _ProfileSettingsScreenState();
}
 
class _ProfileSettingsScreenState extends State<ProfileSettingsScreen> {
  final DocumentService _documentService = DocumentService();
  final ApiClient _apiClient = sl<ApiClient>();
  List<DocumentModel> _documents = [];
  bool _isLoading = true;
  double _engagement = 0;
 
  @override
  void initState() {
    super.initState();
    _fetchDocuments();
    _fetchEngagement();
  }
 
  Future<void> _fetchEngagement() async {
    try {
      final authState = context.read<AuthenticationBloc>().state;
      if (authState is AuthenticatedState) {
        final response = await _apiClient.get(
          path: 'dashboardDriver?userId=${authState.session.uid}&period=month',
        );
        
        if (response != null && response['doneVolume'] != null && mounted) {
          setState(() {
            _engagement = (response['doneVolume'] as num).toDouble();
          });
        }
      }
    } catch (e) {
      print('Error loading engagement: $e');
    }
  }
 
  Future<void> _fetchDocuments() async {
    if (!mounted) return;
    
    setState(() {
      _isLoading = true;
    });
    
    try {
      final authState = context.read<AuthenticationBloc>().state;
      if (authState is AuthenticatedState) {
        final documents = await _documentService.getPartnerDocuments(partnerId: int.tryParse(authState.session.partnerId!) ?? 0);
        if (mounted) {
          setState(() {
            _documents = documents;
            _isLoading = false;
          });
        }
      }
    } catch (e) {
      if (mounted) {
        setState(() {
          _isLoading = false;
        });
      }
      print('Error loading documents: $e');
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      backgroundColor: ColorPalette.white,
      isLeadingVisible: false,
      body: SingleChildScrollView(
        physics: const BouncingScrollPhysics(),
        padding: const EdgeInsets.only(right: 20, left: 20, bottom: 32),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            LogoHeader(title: 'settings.title'.tr()),
            const SizedBox(height: 24),
            _buildProfileHeader(),
            const SizedBox(height: 40),
            _buildMetricsRow(_engagement),
            const SizedBox(height: 40),
            _buildDocumentsSection(context, _documents, _isLoading),
          ],
        ),
      ),
    );
  }
 
  Widget _buildProfileHeader() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            ColorPalette.lightGreen.withValues(alpha: 0.1),
            ColorPalette.tiffanyBlue.withValues(alpha: 0.05),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.03),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Profile Avatar with animation
              Stack(
                children: [
                  Container(
                    width: 80,
                    height: 80,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      gradient: const LinearGradient(
                        colors: [ColorPalette.lightGreen, ColorPalette.tiffanyBlue],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: ColorPalette.lightGreen.withValues(alpha: 0.3),
                          blurRadius: 10,
                          offset: const Offset(0, 4),
                        ),
                      ],
                    ),
                    padding: const EdgeInsets.all(2),
                    child: const CircleAvatar(
                      backgroundColor: ColorPalette.white,
                      child: Icon(
                        Icons.person_outline,
                        size: 40,
                        color: ColorPalette.darkGrey,
                      ),
                    ),
                  ),
                  Positioned(
                    right: 0,
                    top: 0,
                    child: Container(
                      width: 16,
                      height: 16,
                      decoration: BoxDecoration(
                        color: ColorPalette.lightGreen,
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: ColorPalette.white,
                          width: 2,
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withValues(alpha: 0.1),
                            blurRadius: 4,
                            offset: const Offset(0, 2),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(width: 20),
              // Name and Rating
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      UserInfoService.instance.userInfo?.name ?? "--",
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w700,
                        color: ColorPalette.black,
                        height: 1.2,
                        letterSpacing: -0.5,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      UserInfoService.instance.userInfo?.email ?? "--",
                      style: const TextStyle(
                        fontSize: 16,
                        color: ColorPalette.grey,
                        height: 1.2,
                      ),
                    ),
                    const SizedBox(height: 12),
                    // Rating stars in a row
                    Row(
                      children: [
                        ...List.generate(
                          4,
                          (index) => const Padding(
                            padding: EdgeInsets.only(right: 2),
                            child: Icon(
                              Icons.star,
                              color: ColorPalette.orange,
                              size: 18,
                            ),
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.only(right: 2),
                          child: Icon(
                            Icons.star_half,
                            color: ColorPalette.orange,
                            size: 18,
                          ),
                        ),
                        const SizedBox(width: 4),
                        const Text(
                          '4.5',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: ColorPalette.darkGrey,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
          const SizedBox(height: 20),
          // Logout button
          ElevatedButton.icon(
            onPressed: () => _handleLogout(context),
            icon: const Icon(Icons.logout, color: Colors.white),
            label: Text(
              'settings.sign_out'.tr(),
              style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
            style: ElevatedButton.styleFrom(
              backgroundColor: ColorPalette.lightGreen,
              minimumSize: const Size(double.infinity, 45),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              elevation: 2,
            ),
          ),
        ],
      ),
    );
  }
}
 
Widget _buildMetricsRow(double engagement) {
  return Container(
    padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withValues(alpha: 0.05),
          blurRadius: 10,
          offset: const Offset(0, 4),
        ),
      ],
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        _buildMetricItem(
          icon: Icons.track_changes,
          title: 'settings.target'.tr(),
          value: '0 KG',
          color: ColorPalette.tiffanyBlue,
        ),
        _buildDivider(),
        _buildMetricItem(
          icon: Icons.attach_money,
          title: 'settings.balance'.tr(),
          value: 'SAR 0',
          color: ColorPalette.lightGreen,
        ),
        _buildDivider(),
        _buildMetricItem(
          icon: Icons.people_outline,
          title: 'settings.engagement'.tr(),
          value: '${engagement.toStringAsFixed(0)} KG',
          color: ColorPalette.orange,
        ),
      ],
    ),
  );
}
 
Widget _buildDivider() {
  return Container(
    height: 40,
    width: 1,
    color: Colors.grey.withValues(alpha: 0.2),
  );
}
 
Widget _buildMetricItem({
  required IconData icon,
  required String title,
  required String value,
  required Color color,
}) {
  return SizedBox(
    width: 100,
    child: Column(
      children: [
        Container(
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: color.withValues(alpha: 0.1),
            shape: BoxShape.circle,
            boxShadow: [
              BoxShadow(
                color: color.withValues(alpha: 0.1),
                blurRadius: 8,
                offset: const Offset(0, 3),
              ),
            ],
          ),
          child: Icon(icon, color: color, size: 24),
        ),
        const SizedBox(height: 10),
        Text(
          title,
          style: const TextStyle(
            color: ColorPalette.grey,
            fontSize: 14,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          value,
          style: const TextStyle(
            color: ColorPalette.darkGrey,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
  );
}
 
Widget _buildDocumentsSection(BuildContext context, List<DocumentModel> documents, bool isLoading) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Modern header with subtle decoration
      Container(
        margin: const EdgeInsets.only(bottom: 20),
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
          color: ColorPalette.white,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: ColorPalette.lightGreen.withValues(alpha: 0.3),
            width: 1,
          ),
        ),
        child: Row(
          children: [
            Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: ColorPalette.lightGreen.withValues(alpha: 0.1),
                shape: BoxShape.circle,
              ),
              child: const Icon(
                Icons.description_outlined,
                color: ColorPalette.lightGreen,
                size: 20,
              ),
            ),
            const SizedBox(width: 12),
            Text(
              'settings.documents'.tr(),
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: ColorPalette.darkGrey,
              ),
            ),
          ],
        ),
      ),
      
      // Show loading indicator or documents
      isLoading 
          ? const Center(
              child: CircularProgressIndicator(
                color: ColorPalette.lightGreen,
              ),
            )
          : documents.isEmpty
              ? const Center(
                  child: Text(
                    'No documents available',
                    style: TextStyle(
                      color: ColorPalette.grey,
                      fontSize: 16,
                    ),
                  )
              )
                : GridView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: 0.85,
                      crossAxisSpacing: 16,
                      mainAxisSpacing: 20,
                    ),
                    itemCount: documents.length,
                    itemBuilder: (context, index) {
                      final document = documents[index];
                      
                      // Determine icon and color based on document name
                      IconData icon;
                      Color color;
                      
                      if (document.name.toLowerCase().contains('id') || 
                          document.name.toLowerCase().contains('personal')) {
                        icon = Icons.badge_outlined;
                        color = ColorPalette.blue;
                      } else if (document.name.toLowerCase().contains('licence') || 
                                document.name.toLowerCase().contains('driver')) {
                        icon = Icons.drive_eta_outlined;
                        color = ColorPalette.tiffanyBlue;
                      } else if (document.name.toLowerCase().contains('waybill') || 
                                document.name.toLowerCase().contains('naql')) {
                        icon = Icons.receipt_long_outlined;
                        color = ColorPalette.lightGreen;
                      } else if (document.name.toLowerCase().contains('company') || 
                                document.name.toLowerCase().contains('authorization')) {
                        icon = Icons.business_outlined;
                        color = ColorPalette.orange;
                      } else {
                        icon = Icons.insert_drive_file_outlined;
                        color = ColorPalette.lightGreen;
                      }
                      
                      return _buildDocumentItem(
                        title: document.name,
                        color: color,
                        icon: icon,
                        onTap: () {
                          // Handle document tap - open PDF viewer
                          _openDocument(document, context);
                        },
                      );
                    },
                  ),
    ],
  );
}
 
void _openDocument(DocumentModel document, BuildContext context) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => PDFViewerScreen(document: document),
    ),
  );
}
 
Widget _buildDocumentItem({
  required String title,
  required Color color,
  required VoidCallback onTap,
  IconData icon = Icons.insert_drive_file_outlined,
}) {
  return GestureDetector(
    onTap: onTap,
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.05),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
        border: Border.all(
          color: color.withValues(alpha: 0.3),
          width: 1.5,
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: color.withValues(alpha: 0.1),
              shape: BoxShape.circle,
            ),
            child: Icon(
              icon,
              color: color,
              size: 32,
            ),
          ),
          const SizedBox(height: 12),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Text(
              title,
              style: const TextStyle(
                color: ColorPalette.darkGrey,
                fontSize: 14,
                fontWeight: FontWeight.w600,
              ),
              textAlign: TextAlign.center,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          const SizedBox(height: 4),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
            decoration: BoxDecoration(
              color: color.withValues(alpha: 0.1),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Text(
              'View',
              style: TextStyle(
                color: color,
                fontSize: 12,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}
 
Future<void> _handleLogout(BuildContext context) async {
    final bool? confirm = await showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('settings.sign_out'.tr()),
          content: Text('settings.confirm_logout'.tr()),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: Text('common.cancel'.tr()),
            ),
            TextButton(
              onPressed: () => Navigator.of(context).pop(true),
              child: Text('settings.sign_out'.tr(), style: TextStyle(color: ColorPalette.lightGreen)),
            ),
          ],
        );
      },
    );
    
    // If user confirmed logout
    if (confirm == true) {
      if (context.mounted) context.read<AuthenticationBloc>().add(SignOutEvent());
    }
  }