diff --git a/images/divider.png b/images/divider.png new file mode 100644 index 0000000..466a045 Binary files /dev/null and b/images/divider.png differ diff --git a/images/person_available_grey.png b/images/person_available_grey.png new file mode 100644 index 0000000..5c8d175 Binary files /dev/null and b/images/person_available_grey.png differ diff --git a/images/person_delete_grey.png b/images/person_delete_grey.png new file mode 100644 index 0000000..efd948a Binary files /dev/null and b/images/person_delete_grey.png differ diff --git a/images/task_pending_grey.png b/images/task_pending_grey.png new file mode 100644 index 0000000..c893fb2 Binary files /dev/null and b/images/task_pending_grey.png differ diff --git a/lib/app/constant.dart b/lib/app/constant.dart index 2d8564c..131afb7 100644 --- a/lib/app/constant.dart +++ b/lib/app/constant.dart @@ -8,9 +8,11 @@ class Constant { static double designWidthPhone = 390; // color theme + static Color textTrueBlack = const Color(0xff000000); static Color textBlack = const Color(0xff212B36); static Color textDarkGrey = const Color(0xff637381); static Color textLightGrey = const Color(0xff919EAB); + static Color textOrange = const Color(0xffF15A29); // size convertion static double getActualXPhone({ @@ -35,6 +37,14 @@ class Constant { ); } + static TextStyle titleH1_500_18({required BuildContext context}) { + return TextStyle( + fontSize: Constant.getActualYPhone(context: context, y: 18), + fontWeight: FontWeight.w500, + fontFamily: 'Public Sans' + ); + } + static TextStyle titleH2_600({required BuildContext context}) { return TextStyle( fontSize: Constant.getActualYPhone(context: context, y: 12), @@ -74,6 +84,22 @@ class Constant { ); } + static TextStyle subtitle_600_14({required BuildContext context}) { + return TextStyle( + fontSize: Constant.getActualYPhone(context: context, y: 14), + fontWeight: FontWeight.w700, + fontFamily: 'Public Sans', + ); + } + + static TextStyle subtitle_500_12({required BuildContext context}) { + return TextStyle( + fontSize: Constant.getActualYPhone(context: context, y: 12), + fontWeight: FontWeight.w700, + fontFamily: 'Public Sans', + ); + } + static TextStyle date_600({required BuildContext context}) { return TextStyle( fontSize: Constant.getActualYPhone(context: context, y: 16), diff --git a/lib/screen/homepage/homepage_screen.dart b/lib/screen/homepage/homepage_screen.dart index 873c774..804f152 100644 --- a/lib/screen/homepage/homepage_screen.dart +++ b/lib/screen/homepage/homepage_screen.dart @@ -169,12 +169,12 @@ class HomepageScreen extends StatelessWidget { height:Constant.getActualYPhone(context: context, y: 50), decoration: BoxDecoration( // color: Colors.green, - image: DecorationImage( + image: DecorationImage( // fit: BoxFit.contain, - image: AssetImage('images/person.png'), + image: AssetImage('images/person.png'), + ), ), ), - ), SizedBox( height: Constant.getActualYPhone(context: context, y: 8), @@ -248,11 +248,194 @@ class HomepageScreen extends StatelessWidget { ), ) ), - ], ), ), ), + + SizedBox( + height: Constant.getActualYPhone(context: context, y: 56), + ), + + //Menu Rekap Presensi + Padding( + padding: EdgeInsets.only( + right:Constant.getActualXPhone(context: context, x: 27), + left: Constant.getActualXPhone(context: context, x: 33), + ), + child: SizedBox( + width: Constant.getActualXPhone(context: context, x: 330), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Rekap Presensi Bulan Ini', + style: Constant.titleH1_500_18(context: context).copyWith( + color: Constant.textTrueBlack, + ), + ), + + SizedBox( + height: Constant.getActualYPhone(context: context, y: 20), + ), + + Container( + decoration: BoxDecoration( + shape: BoxShape.rectangle, + borderRadius: BorderRadius.circular(16), + color: Colors.white, // Set background color to #FFF + boxShadow: [ + BoxShadow( + color: Color.fromRGBO(145, 158, 171, 0.20), + blurRadius: 2, + ), + ], + ), + child: Padding( + padding: EdgeInsets.only( + top: Constant.getActualYPhone(context: context, y: 12), + bottom: Constant.getActualYPhone(context: context, y: 12), + left: Constant.getActualXPhone(context: context, x: 24), + right:Constant.getActualXPhone(context: context, x: 24), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Container( + + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + '24 hari', + style: Constant.subtitle_600_14(context: context).copyWith( + color: Constant.textOrange, + ), + ), + + SizedBox( + height: Constant.getActualYPhone(context: context, y: 4), + ), + + SizedBox( + child: Row( + children: [ + Image( + image:AssetImage('images/person_available_grey.png'), + ), + + SizedBox( + width: Constant.getActualXPhone(context: context, x: 4), + ), + + Text( + 'Kehadiran', + style: Constant.subtitle_500_12(context: context).copyWith( + color: Constant.textDarkGrey, + ), + ), + ], + ), + ) + ], + ), + ), + + Image( + image:AssetImage('images/divider.png'), + ), + + //Tidak Hadir + Container( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + '2 hari', + style: Constant.subtitle_600_14(context: context).copyWith( + color: Constant.textOrange, + ), + ), + + SizedBox( + height: Constant.getActualYPhone(context: context, y: 4), + ), + + SizedBox( + child: Row( + children: [ + Image( + image:AssetImage('images/person_delete_grey.png'), + ), + + SizedBox( + width: Constant.getActualXPhone(context: context, x: 4), + ), + + Text( + 'Tidak Hadir', + style: Constant.subtitle_500_12(context: context).copyWith( + color: Constant.textDarkGrey, + ), + ), + ], + ), + ) + ], + ), + ), + + Image( + image:AssetImage('images/divider.png'), + ), + + //Tidak Hadir + Container( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + '5 hari', + style: Constant.subtitle_600_14(context: context).copyWith( + color: Constant.textOrange, + ), + ), + + SizedBox( + height: Constant.getActualYPhone(context: context, y: 4), + ), + + SizedBox( + child: Row( + children: [ + Image( + image:AssetImage('images/task_pending_grey.png'), + ), + + SizedBox( + width: Constant.getActualXPhone(context: context, x: 4), + ), + + Text( + 'Lembur', + style: Constant.subtitle_500_12(context: context).copyWith( + color: Constant.textDarkGrey, + ), + ), + ], + ), + ) + ], + ), + ), + ], + ), + ), + ) + ], + ), + ), + ) ], ), ),