alora dashboard ui example

main.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:timezone/data/latest.dart' as tz;
import 'package:timezone/timezone.dart' as tz;

void main() {
  tz.initializeTimeZones();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VOIP Dashboard',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF6750A4),
          primary: const Color(0xFF6750A4),
          secondary: const Color(0xFF625B71),
          surface: Colors.white,
          error: const Color(0xFFB3261E),
          onPrimary: Colors.white,
          onSecondary: Colors.white,
          onSurface: Colors.black,
          onError: Colors.white,
          onPrimaryContainer: Colors.white,
          onSecondaryContainer: Colors.white,
          onErrorContainer: Colors.white,
          onSurfaceVariant: Colors.black,
          onInverseSurface: Colors.black,
          outline: Colors.black,
        ).copyWith(brightness: Brightness.light),
        useMaterial3: true,
      ),
      home: const ServiceNumbersList(),
    );
  }
}

class ServiceNumber {
  final String name;
  final String number;
  final List<String> features;

  ServiceNumber({
    required this.name,
    required this.number,
    required this.features,
  });
}

class ServiceNumbersList extends StatefulWidget {
  const ServiceNumbersList({super.key});

  @override
  State<ServiceNumbersList> createState() => _ServiceNumbersListState();
}

class _ServiceNumbersListState extends State<ServiceNumbersList> {
  List<ServiceNumber> serviceNumbers = [
    ServiceNumber(
      name: 'Main Number',
      number: '555-321-7654',
      features: ['SMS', 'Voice'],
    ),
    ServiceNumber(
      name: 'Additional Number',
      number: '555-654-3210',
      features: ['SMS', 'Voice', 'eFax'],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    const timeZone = 'America/Los_Angeles';
    final now = tz.TZDateTime.now(tz.getLocation(timeZone));
    final formattedDate = DateFormat('EEEE, MMMM d, yyyy').format(now);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.surface,
        elevation: 4.0,
        title: const Text('Dashboard'),
        titleTextStyle: TextStyle(
          color: Theme.of(context).colorScheme.onSurface,
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
        ),
        iconTheme: IconThemeData(
          color: Theme.of(context).colorScheme.onSurface,
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.00),
              child: Wrap(
                alignment: WrapAlignment.center,
                spacing: 10.0,
                children: [
                  SizedBox(
                    width: 100,
                    child: DashboardButton(
                      icon: Icons.email,
                      label: 'Contacts',
                      onPressed: () {},
                    ),
                  ),
                  SizedBox(
                    width: 100,
                    child: DashboardButton(
                      icon: Icons.dashboard,
                      label: 'Menu',
                      onPressed: () {},
                    ),
                  ),
                  SizedBox(
                    width: 100,
                    child: DashboardButton(
                      icon: Icons.people,
                      label: 'SMS',
                      onPressed: () {},
                    ),
                  ),
                  SizedBox(
                    width: 100,
                    child: DashboardButton(
                      icon: Icons.fax,
                      label: 'eFax',
                      onPressed: () {},
                    ),
                  ),
                ],
              ),
            ),
            UserInfoCard(
              userName: 'John Doe',
              userEmail: '[email protected]',
              formattedDate: formattedDate,
              timeZone: timeZone,
            ),
            const Padding(
              padding: EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0),
              child: Text(
                'Service Numbers',
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              ),
            ),
            ListView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: serviceNumbers.length,
              itemBuilder: (context, index) {
                return ServiceNumberCard(serviceNumber: serviceNumbers[index]);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class UserInfoCard extends StatelessWidget {
  const UserInfoCard({
    super.key,
    required this.userName,
    required this.userEmail,
    required this.formattedDate,
    required this.timeZone,
  });

  final String userName;
  final String userEmail;
  final String formattedDate;
  final String timeZone;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(8.0),
      elevation: 2.0,
      color: Theme.of(context).colorScheme.surface,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                const CircleAvatar(
                  radius: 30,
                  child: Icon(Icons.person),
                ),
                const SizedBox(width: 16.0),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Welcome, $userName!',
                        style: TextStyle(
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                          color: Theme.of(context).colorScheme.onSurface,
                        ),
                      ),
                      Text(
                        userEmail,
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Theme.of(context).colorScheme.onSurfaceVariant,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16.0),
            Text(
              formattedDate,
              style: TextStyle(
                fontSize: 14.0,
                color: Theme.of(context).colorScheme.onSurfaceVariant,
              ),
            ),
            Text(
              'Time Zone: $timeZone',
              style: TextStyle(
                fontSize: 14.0,
                color: Theme.of(context).colorScheme.onSurfaceVariant,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DashboardButton extends StatelessWidget {
  const DashboardButton({
    super.key,
    required this.icon,
    required this.label,
    required this.onPressed,
  });

  final IconData icon;
  final String label;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Theme.of(context).colorScheme.surfaceContainerHighest,
        foregroundColor: Theme.of(context).colorScheme.onSurfaceVariant,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
        padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
      ),
      onPressed: onPressed,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            color: Theme.of(context).colorScheme.onSurfaceVariant,
            size: 24.0,
          ),
          Text(
            label,
            style: TextStyle(
              color: Theme.of(context).colorScheme.onSurfaceVariant,
              fontSize: 12,
            ),
          ),
        ],
      ),
    );
  }
}

class ServiceNumberCard extends StatelessWidget {
  const ServiceNumberCard({super.key, required this.serviceNumber});

  final ServiceNumber serviceNumber;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(8.0),
      elevation: 2.0,
      color: Theme.of(context).colorScheme.surface,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          children: [
            SizedBox(
              width: 48.0,
              height: 48.0,
              child: Container(
                padding: const EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Icon(
                  Icons.phone,
                  color: Theme.of(context).colorScheme.primary,
                ),
              ),
            ),
            const SizedBox(width: 16.0),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    serviceNumber.name,
                    style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.bold,
                      color: Theme.of(context).colorScheme.onSurface,
                    ),
                  ),
                  Text(
                    serviceNumber.number,
                    style: TextStyle(
                      fontSize: 16.0,
                      color: Theme.of(context).colorScheme.onSurface,
                    ),
                  ),
                  const SizedBox(height: 10),
                  Wrap(
                    spacing: 8.0,
                    children: serviceNumber.features.map<Widget>((feature) {
                      IconData icon;
                      switch (feature.toLowerCase()) {
                        case 'sms':
                          icon = Icons.message;
                          break;
                        case 'voice':
                          icon = Icons.phone;
                          break;
                        case 'efax':
                          icon = Icons.fax;
                          break;
                        default:
                          icon = Icons.question_mark;
                      }
                      return Chip(
                        avatar: Icon(icon, size: 16.0),
                        label: Text(feature),
                      );
                    }).toList(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}