Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Absence Tracker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: AbsenceScreen(),
    );
  }
}

class AbsenceScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Absence Tracker'),
      ),
      body: Row(
        children: [
          if (MediaQuery.of(context).size.width > 600) ...[
            NavigationPanel(),
            VerticalDivider(width: 1),
          ],
          Expanded(
            child: AbsenceContent(),
          ),
        ],
      ),
    );
  }
}

class NavigationPanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 250,
      color: Colors.blue.shade50,
      child: ListView(
        children: [
          DrawerHeader(
            child: Text('neogeist ventures'),
          ),
          ListTile(
            title: Text('Home'),
            leading: Icon(Icons.home),
          ),
          ListTile(
            title: Text('Inbox'),
            leading: Icon(Icons.inbox),
          ),
          ListTile(
            title: Text('Search'),
            leading: Icon(Icons.search),
          ),
          ListTile(
            title: Text('Employees'),
            leading: Icon(Icons.people),
          ),
          ListTile(
            title: Text('Calendars'),
            leading: Icon(Icons.calendar_today),
          ),
          ListTile(
            title: Text('Time Tracking'),
            leading: Icon(Icons.access_time),
          ),
        ],
      ),
    );
  }
}

class AbsenceContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        UserInfo(),
        Divider(height: 1),
        AbsenceTabs(),
        Expanded(
          child: AbsenceDetails(),
        ),
      ],
    );
  }
}

class UserInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage('https://placehold.co/40x40?description=User%20Avatar'),
      ),
      title: Text('Adnan Alakkad'),
      subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Full Stack Developer'),
          Text('IT | Remote'),
          Text('Since 18/09/2023 (10 mo.)'),
        ],
      ),
      trailing: Chip(
        label: Text('Active'),
        backgroundColor: Colors.green.shade100,
      ),
    );
  }
}

class AbsenceTabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TabBar(
      tabs: [
        Tab(text: 'Personal info'),
        Tab(text: 'Salary'),
        Tab(text: 'Documents'),
        Tab(text: 'Attendance'),
        Tab(text: 'Absence'),
      ],
    );
  }
}

class AbsenceDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AbsenceBalances(),
        Expanded(
          child: AbsenceCalendar(),
        ),
      ],
    );
  }
}

class AbsenceBalances extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: Column(
        children: [
          AbsenceBalanceItem(
            title: 'Bezahlter Urlaub',
            days: '30 days available',
            color: Colors.green,
          ),
          AbsenceBalanceItem(
            title: 'Krankheit (ohne AU, unter 3 Tage)',
            days: '',
            color: Colors.red,
          ),
          AbsenceBalanceItem(
            title: 'Krankheit (mit AU, ab dem 4. Tag)',
            days: '',
            color: Colors.red,
          ),
          AbsenceBalanceItem(
            title: 'Elternzeit',
            days: '',
            color: Colors.grey,
          ),
          AbsenceBalanceItem(
            title: 'Mutterschutz',
            days: '',
            color: Colors.grey,
          ),
          AbsenceBalanceItem(
            title: 'Home Office',
            days: '',
            color: Colors.grey,
          ),
          AbsenceBalanceItem(
            title: 'Unbezahlter Urlaub',
            days: '',
            color: Colors.grey,
          ),
        ],
      ),
    );
  }
}

class AbsenceBalanceItem extends StatelessWidget {
  final String title;
  final String days;
  final Color color;

  AbsenceBalanceItem({
    required this.title,
    required this.days,
    required this.color,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: color,
        radius: 5,
      ),
      title: Text(title),
      subtitle: Text(days),
      trailing: Icon(Icons.arrow_forward_ios),
    );
  }
}

class AbsenceCalendar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      firstDay: DateTime.utc(2020, 1, 1),
      lastDay: DateTime.utc(2030, 12, 31),
      focusedDay: DateTime.now(),
      calendarFormat: CalendarFormat.month,
      headerStyle: HeaderStyle(
        formatButtonVisible: false,
        titleCentered: true,
      ),
      calendarStyle: CalendarStyle(
        todayDecoration: BoxDecoration(
          color: Colors.blue.shade200,
          shape: BoxShape.circle,
        ),
        selectedDecoration: BoxDecoration(
          color: Colors.blue,
          shape: BoxShape.circle,
        ),
        holidayDecoration: BoxDecoration(
          color: Colors.green.shade200,
          shape: BoxShape.circle,
        ),
      ),
      selectedDayPredicate: (day) {
        return isSameDay(day, DateTime.now());
      },
    );
  }
}