chitfund/luckychit/test_mobile_friendly.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'lib/core/models/financial_table_entry.dart';
import 'lib/shared/widgets/financial_table.dart';

void main() {
  runApp(const MobileFriendlyTestApp());
}

class MobileFriendlyTestApp extends StatelessWidget {
  const MobileFriendlyTestApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812), // iPhone X design size
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp(
          title: 'Mobile Friendly Test',
          theme: ThemeData(
            primarySwatch: Colors.green,
            useMaterial3: true,
          ),
          home: const MobileFriendlyTestPage(),
        );
      },
    );
  }
}

class MobileFriendlyTestPage extends StatelessWidget {
  const MobileFriendlyTestPage({super.key});

  @override
  Widget build(BuildContext context) {
    // Sample financial data
    final sampleData = [
      FinancialTableEntry(
        monthYear: 'Jan-25',
        chitValue: 500000,
        bidAmount: 438250,
        subscriptionAmount: 25000,
        commissionInstallment: 250,
        totalPayableInstallment: 25250,
        dividendAmount: 61750,
      ),
      FinancialTableEntry(
        monthYear: 'Feb-25',
        chitValue: 500000,
        bidAmount: 440850,
        subscriptionAmount: 25000,
        commissionInstallment: 250,
        totalPayableInstallment: 25250,
        dividendAmount: 59150,
      ),
      FinancialTableEntry(
        monthYear: 'Mar-25',
        chitValue: 500000,
        bidAmount: 443450,
        subscriptionAmount: 25000,
        commissionInstallment: 250,
        totalPayableInstallment: 25250,
        dividendAmount: 56550,
      ),
      FinancialTableEntry(
        monthYear: 'Total',
        chitValue: 1500000,
        bidAmount: 1322550,
        subscriptionAmount: 75000,
        commissionInstallment: 750,
        totalPayableInstallment: 75750,
        dividendAmount: 177450,
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Mobile Friendly Test'),
        backgroundColor: Colors.green.shade600,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Financial Table (Desktop)',
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(height: 12.h),
            FinancialTable(
              entries: sampleData,
              onRefresh: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Refresh tapped!')),
                );
              },
            ),
            SizedBox(height: 32.h),
            Text(
              'Financial Table (Mobile)',
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(height: 12.h),
            CompactFinancialTable(
              entries: sampleData,
              onRefresh: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Refresh tapped!')),
                );
              },
            ),
            SizedBox(height: 32.h),
            Text(
              'Mobile-Friendly Improvements:',
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(height: 12.h),
            _buildFeatureCard(
              'Larger Fonts',
              'Increased font sizes for better readability on mobile',
              Icons.text_fields,
              Colors.blue,
            ),
            SizedBox(height: 8.h),
            _buildFeatureCard(
              'Better Touch Targets',
              'Larger buttons and improved spacing for easier tapping',
              Icons.touch_app,
              Colors.green,
            ),
            SizedBox(height: 8.h),
            _buildFeatureCard(
              'Optimized Cards',
              'Compact card design with better visual hierarchy',
              Icons.grid_view,
              Colors.orange,
            ),
            SizedBox(height: 8.h),
            _buildFeatureCard(
              'Responsive Layout',
              'Adaptive design that works on all screen sizes',
              Icons.phone_android,
              Colors.purple,
            ),
            SizedBox(height: 8.h),
            _buildFeatureCard(
              'Enhanced Typography',
              'Better font weights and spacing for mobile scanning',
              Icons.format_size,
              Colors.teal,
            ),
            SizedBox(height: 8.h),
            _buildFeatureCard(
              'Improved Spacing',
              'Consistent padding and margins for mobile comfort',
              Icons.space_bar,
              Colors.indigo,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildFeatureCard(String title, String description, IconData icon, Color color) {
    return Card(
      elevation: 1,
      child: Padding(
        padding: EdgeInsets.all(16.w),
        child: Row(
          children: [
            Container(
              padding: EdgeInsets.all(12.w),
              decoration: BoxDecoration(
                color: color.withOpacity(0.1),
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Icon(icon, color: color, size: 24.w),
            ),
            SizedBox(width: 16.w),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    description,
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Colors.grey.shade600,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}