في هذة الواجهه لا اريد المستخدم ان يقوم بادخال الوقت يدوياً اريد ان يكون هناك حقلين الحقل الاول يحدد تاريخ البدا اي من اليو والشهر والساعة الفلانية 
والحقل الثانية ان يقوم بتحديد الفترة الى اليوم والوقت والساعة الفلانية 
الكود
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:micro_panel/AddHotspotUser.dart';
import 'package:micro_panel/AddUserManagerUser.dart';
import 'package:micro_panel/HomePage.dart';
import 'package:micro_panel/Login.dart';
import 'package:micro_panel/hotspotUserList.dart';
import 'package:router_os_client/router_os_client.dart';

class UserManagerSession extends StatefulWidget {
  final RouterOSClient client;
  const UserManagerSession({super.key, required this.client});

  @override
  State<UserManagerSession> createState() => _UserManagerSessionState();
}

class _UserManagerSessionState extends State<UserManagerSession> {
  final TextEditingController _dateTimeController = TextEditingController();
  final ValueNotifier<List<Map<String, dynamic>>> _sessionsNotifier =
      ValueNotifier([]);
  final ValueNotifier<bool> _isLoadingNotifier = ValueNotifier(false);
  final ValueNotifier<String?> _errorNotifier = ValueNotifier(null);

  Color _primaryColor = const Color(0xFF3B82F6);
  Color _backgroundColor = const Color(0xFF0A192F);
  Color _cardColor = const Color(0xFF172A46);
  Color _textColor = Colors.white;
  int _currentIndex = 0;

  Future<void> _fetchSessions() async {
    final input = _dateTimeController.text.trim();
    if (input.isEmpty) {
      _errorNotifier.value = 'يرجى إدخال تاريخ ووقت بصيغة yyyy-MM-ddTHH:mm:ss';
      _sessionsNotifier.value = [];
      return;
    }
    _errorNotifier.value = null;
    _isLoadingNotifier.value = true;
    _sessionsNotifier.value = [];

    try {
      final findResponse = await widget.client.talk([
        '/tool/user-manager/session/find',
        'where=started>=$input',
      ]);

      if (findResponse.isEmpty) {
        _sessionsNotifier.value = [];
        _isLoadingNotifier.value = false;
        return;
      }

      final List<String> ids = [];
      for (var item in findResponse) {
        if (item is Map && item.containsKey('.id')) {
          ids.add(item['.id'] as String);
        }
      }

      final List<Map<String, dynamic>> sessions = [];
      for (var id in ids) {
        final sessionResponse = await widget.client.talk([
          '/tool/user-manager/session/print',
          'where=.id=$id',
        ]);
        if (sessionResponse.isNotEmpty && sessionResponse[0] is Map) {
          sessions.add(Map<String, dynamic>.from(sessionResponse[0] as Map));
        }
      }
      _sessionsNotifier.value = sessions;
    } catch (e) {
      _errorNotifier.value = 'حدث خطأ أثناء جلب الجلسات';
    } finally {
      _isLoadingNotifier.value = false;
    }
  }

  @override
  void dispose() {
    _dateTimeController.dispose();
    _sessionsNotifier.dispose();
    _isLoadingNotifier.dispose();
    _errorNotifier.dispose();
    super.dispose();
  }

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });

    switch (index) {
      case 0:
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => RouterDetailsPage(client: widget.client),
          ),
        );
        break;
      case 1:
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => UsersPage(client: widget.client),
          ),
        );
        break;
      case 2:
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => AddHotspotCardsPage(client: widget.client),
          ),
        );
        break;
      case 3:
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => Login()),
        );
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 800) {
            return _buildDesktopLayout(context);
          } else {
            return _buildMobileLayout(context);
          }
        },
      ),
    );
  }

  Widget _buildDesktopLayout(BuildContext context) {
    return Scaffold(
      backgroundColor: _backgroundColor,
      body: Row(
        children: [
          _buildDesktopNavigation(),
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    _backgroundColor.withOpacity(0.9),
                    _backgroundColor.withOpacity(0.7),
                  ],
                ),
              ),
              child: _buildMainContent(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMobileLayout(BuildContext context) {
    return Scaffold(
      backgroundColor: _backgroundColor,
      drawer: _buildMobileDrawer(),
      appBar: AppBar(
        title: const Text('عرض جلسات اليوزر مانجر'),
        backgroundColor: _backgroundColor,
        centerTitle: true,
        elevation: 0,
      ),
      body: _buildMainContent(),
    );
  }

  Widget _buildDesktopNavigation() {
    return SingleChildScrollView(
      child: Container(
        width: 280,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.05),
          border: Border(
            right: BorderSide(color: Colors.white.withOpacity(0.1)),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 40),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                children: [
                  Icon(Icons.assignment_ind, color: _primaryColor, size: 28),
                  const SizedBox(width: 10),
                  Text(
                    'جلسات اليوزر مانجر',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 30),
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // قسم الإدارة الرئيسية
                    Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 8,
                      ),
                      child: Text(
                        'الإدارة الرئيسية',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.5),
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    _buildNavItem(
                      icon: Icons.dashboard,
                      title: 'لوحة التحكم',
                      isActive: false,
                      onTap: () {
                        Navigator.pushReplacement(
                          context,
                          MaterialPageRoute(
                            builder:
                                (context) =>
                                    RouterDetailsPage(client: widget.client),
                          ),
                        );
                      },
                    ),

                    // قسم الهوتسبوت (قابل للطي)
                    _buildExpandableSection(
                      title: 'إدارة الهوتسبوت',
                      icon: Icons.wifi,
                      children: [
                        _buildNavItem(
                          icon: Icons.people,
                          title: 'قائمة المستخدمين',
                          isActive: false,
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder:
                                    (context) =>
                                        UsersPage(client: widget.client),
                              ),
                            );
                          },
                        ),
                        _buildNavItem(
                          icon: Icons.person_add,
                          title: 'اضافة مستخدم',
                          isActive: false,
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder:
                                    (context) => AddHotspotCardsPage(
                                      client: widget.client,
                                      initialTab: 0,
                                    ),
                              ),
                            );
                          },
                        ),
                        _buildNavItem(
                          icon: Icons.group_add,
                          title: 'اضافة المستخدمين',
                          isActive: false,
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder:
                                    (context) => AddHotspotCardsPage(
                                      client: widget.client,
                                      initialTab: 1,
                                    ),
                              ),
                            );
                          },
                        ),
                        _buildNavItem(
                          icon: Icons.donut_small_sharp,
                          title: 'الاحصائية',
                          isActive: false,
                          onTap: () {},
                        ),
                      ],
                    ),

                    // قسم اليوزر مانجر (قابل للطي)
                    _buildExpandableSection(
                      title: 'إدارة اليوزر مانجر',
                      icon: Icons.manage_accounts,
                      children: [
                        _buildNavItem(
                          icon: Icons.people_outline,
                          title: 'قائمة المستخدمين',
                          isActive: false,
                          onTap: () {
                            // Navigation code here
                          },
                        ),
                        _buildNavItem(
                          icon: Icons.payment_rounded,
                          title: 'اضافة مستخدم',
                          isActive: false,
                          onTap: () {
                            Navigator.pushReplacement(
                              context,
                              MaterialPageRoute(
                                builder:
                                    (_) => AddUserManagerCards(
                                      client: widget.client,
                                    ),
                              ),
                            );
                          },
                        ),
                        _buildNavItem(
                          icon: Icons.credit_score,
                          title: 'اضافة المستخدمين',
                          isActive: false,
                          onTap: () {
                            // Navigation code here
                          },
                        ),
                        _buildNavItem(
                          icon: Icons.bar_chart,
                          title: 'الاحصائية',
                          isActive: true,
                          onTap: () {},
                        ),
                        _buildNavItem(
                          icon: Icons.assignment,
                          title: 'السجلات',
                          isActive: false,
                          onTap: () {
                            // Navigation code here
                          },
                        ),
                      ],
                    ),

                    // قسم الإعدادات والأدوات (قابل للطي)
                    _buildExpandableSection(
                      title: 'الإعدادات والأدوات',
                      icon: Icons.settings,
                      children: [
                        _buildNavItem(
                          icon: Icons.settings,
                          title: 'إعدادات النظام',
                          isActive: false,
                          onTap: () {},
                        ),
                        _buildNavItem(
                          icon: Icons.backup,
                          title: 'النسخ الاحتياطي',
                          isActive: false,
                          onTap: () {},
                        ),
                        _buildNavItem(
                          icon: Icons.security,
                          title: 'الأمان',
                          isActive: false,
                          onTap: () {},
                        ),
                        _buildNavItem(
                          icon: Icons.cloud,
                          title: 'التحديثات',
                          isActive: false,
                          onTap: () {},
                        ),
                      ],
                    ),

                    // قسم المساعدة والدعم (قابل للطي)
                    _buildExpandableSection(
                      title: 'المساعدة والدعم',
                      icon: Icons.help,
                      children: [
                        _buildNavItem(
                          icon: Icons.help_outline,
                          title: 'المركز المساعدة',
                          isActive: false,
                          onTap: () {},
                        ),
                        _buildNavItem(
                          icon: Icons.feedback,
                          title: 'إرسال ملاحظات',
                          isActive: false,
                          onTap: () {},
                        ),
                        _buildNavItem(
                          icon: Icons.info_outline,
                          title: 'حول التطبيق',
                          isActive: false,
                          onTap: () {},
                        ),
                        _buildNavItem(
                          icon: Icons.logout,
                          title: 'تسجيل الخروج',
                          isActive: false,
                          onTap: () {
                            Navigator.pushReplacement(
                              context,
                              MaterialPageRoute(builder: (context) => Login()),
                            );
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNavItem({
    required IconData icon,
    required String title,
    required bool isActive,
    required VoidCallback onTap,
  }) {
    return InkWell(
      onTap: onTap,
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: isActive ? _primaryColor.withOpacity(0.2) : Colors.transparent,
          borderRadius: BorderRadius.circular(8),
          border:
              isActive
                  ? Border.all(color: _primaryColor.withOpacity(0.5), width: 1)
                  : null,
        ),
        child: Row(
          children: [
            Icon(
              icon,
              color: isActive ? _primaryColor : Colors.white.withOpacity(0.7),
              size: 24,
            ),
            const SizedBox(width: 12),
            Text(
              title,
              style: TextStyle(
                color: isActive ? Colors.white : Colors.white.withOpacity(0.7),
                fontSize: 16,
                fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
              ),
            ),
            if (isActive) const Spacer(),
            if (isActive)
              Container(
                width: 8,
                height: 8,
                decoration: BoxDecoration(
                  color: _primaryColor,
                  shape: BoxShape.circle,
                ),
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildExpandableSection({
    required String title,
    required IconData icon,
    required List<Widget> children,
  }) {
    return ExpansionTile(
      title: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: Row(
          children: [
            Icon(icon, color: Colors.white.withOpacity(0.7), size: 24),
            const SizedBox(width: 12),
            Text(
              title,
              style: TextStyle(
                color: Colors.white.withOpacity(0.7),
                fontSize: 16,
                fontWeight: FontWeight.normal,
              ),
            ),
          ],
        ),
      ),
      childrenPadding: const EdgeInsets.only(left: 16),
      collapsedIconColor: Colors.white.withOpacity(0.7),
      iconColor: Colors.white.withOpacity(0.7),
      initiallyExpanded: true,
      children: children,
    );
  }

  Widget _buildMobileDrawer() {
    return Drawer(
      backgroundColor: _backgroundColor,
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          DrawerHeader(
            decoration: BoxDecoration(
              color: _primaryColor.withOpacity(0.1),
              border: Border(
                bottom: BorderSide(color: Colors.white.withOpacity(0.1)),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(Icons.manage_accounts, size: 40, color: _primaryColor),
                const SizedBox(height: 10),
                Text(
                  'إدارة اليوزر مانجر',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),

          _buildNavigationItems(),
        ],
      ),
    );
  }

  Widget _buildNavigationItems() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildNavItem(
          icon: Icons.dashboard,
          title: 'لوحة التحكم',
          isActive: false,
          onTap: () => _onItemTapped(0),
        ),
        _buildNavItem(
          icon: Icons.people_outline,
          title: 'قائمة المستخدمين',
          isActive: false,
          onTap: () => _onItemTapped(1),
        ),
        _buildNavItem(
          icon: Icons.person_add,
          title: 'إضافة مستخدم',
          isActive: false,
          onTap: () => _onItemTapped(2),
        ),
        _buildNavItem(
          icon: Icons.assignment_ind,
          title: 'جلسات المستخدمين',
          isActive: true,
          onTap: () => _onItemTapped(3),
        ),
        const Divider(color: Colors.white24),
        _buildNavItem(
          icon: Icons.logout,
          title: 'تسجيل خروج',
          isActive: false,
          onTap: () => _onItemTapped(4),
        ),
      ],
    );
  }

  Widget _buildMainContent() {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            _backgroundColor.withOpacity(0.9),
            _backgroundColor.withOpacity(0.7),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          TextField(
            controller: _dateTimeController,
            decoration: InputDecoration(
              labelText: 'أدخل تاريخ ووقت (yyyy-MM-ddTHH:mm:ss)',
              border: const OutlineInputBorder(),
              suffixIcon: const Icon(Icons.calendar_today),
              labelStyle: TextStyle(color: _textColor.withOpacity(0.8)),
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: _textColor.withOpacity(0.2)),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: _primaryColor),
              ),
              filled: true,
              fillColor: _textColor.withOpacity(0.05),
            ),
            style: TextStyle(color: _textColor),
          ),

          const SizedBox(height: 12),
          ElevatedButton(
            onPressed: _fetchSessions,
            style: ElevatedButton.styleFrom(
              backgroundColor: _primaryColor,
              padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 24),
            ),
            child: const Text('جلب الجلسات', style: TextStyle(fontSize: 16)),
          ),
          const SizedBox(height: 12),
          ValueListenableBuilder<String?>(
            valueListenable: _errorNotifier,
            builder: (context, error, _) {
              if (error == null) return const SizedBox.shrink();
              return Text(error, style: const TextStyle(color: Colors.red));
            },
          ),
          ValueListenableBuilder<bool>(
            valueListenable: _isLoadingNotifier,
            builder: (context, isLoading, _) {
              if (isLoading) {
                return const Expanded(
                  child: Center(child: CircularProgressIndicator()),
                );
              }
              return const SizedBox.shrink();
            },
          ),
          Expanded(
            child: ValueListenableBuilder<List<Map<String, dynamic>>>(
              valueListenable: _sessionsNotifier,
              builder: (context, sessions, _) {
                if (sessions.isEmpty) {
                  if (_isLoadingNotifier.value) {
                    return const SizedBox.shrink();
                  }
                  return Center(
                    child: Text(
                      'لا توجد جلسات لعرضها',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.7),
                        fontSize: 16,
                      ),
                    ),
                  );
                }
                return ListView.separated(
                  itemCount: sessions.length,
                  separatorBuilder: (_, __) => Divider(color: Colors.white24),
                  itemBuilder: (context, index) {
                    final session = sessions[index];
                    return Container(
                      decoration: BoxDecoration(
                        color: _cardColor,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      margin: const EdgeInsets.symmetric(vertical: 6),
                      padding: const EdgeInsets.all(12),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'المستخدم: ${session['user'] ?? ''}',
                            style: TextStyle(
                              color: _textColor,
                              fontWeight: FontWeight.bold,
                              fontSize: 16,
                            ),
                          ),
                          Text(
                            'تاريخ البدء: ${session['started'] ?? ''}',
                            style: TextStyle(
                              color: _textColor.withOpacity(0.8),
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'مدة الاتصال: ${session['uptime'] ?? ''}',
                            style: TextStyle(
                              color: _textColor.withOpacity(0.8),
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'العنوان: ${session['address'] ?? ''}',
                            style: TextStyle(
                              color: _textColor.withOpacity(0.8),
                              fontSize: 14,
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}


ملاحظة اعطيني الجزء السابق والجزء المراد استبدالة بة