step 18 : perbaikan login pada useeffect dan logout pada mutation

.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "absensi_sas_flutter_web",
+            "request": "launch",
+            "type": "dart",
+            "args": ["--web-port","5000"]
+        },
+        {
+            "name": "absensi_sas_flutter",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "absensi_sas_flutter (profile mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "absensi_sas_flutter (release mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        }
+    ]
+}

android/app/build.gradle

@@ -53,6 +53,7 @@ android {
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
+        multiDexEnabled true
     }
 
     buildTypes {
@@ -71,4 +72,5 @@ flutter {
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
     implementation platform('com.google.firebase:firebase-bom:32.7.0')
+    implementation 'com.android.support:multidex:1.0.3'
 }

android/app/src/main/AndroidManifest.xml

@@ -1,11 +1,14 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-<uses-permission android:name="android.permission.INTERNET"/>
-<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
-<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
+    <uses-permission android:name="android.permission.INTERNET"/>
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+
     <application
-        android:label="absensi_sas_flutter"
+        android:label="Absensi"
         android:name="${applicationName}"
-        android:icon="@mipmap/ic_launcher">
+        android:icon="@mipmap/launcher_icon">
         <activity
             android:name=".MainActivity"
             android:exported="true"

lib/app/constant.dart

@@ -4,12 +4,43 @@ class Constant {
   // static double designHeight = 1024;
   // static double designWidth = 1440;
 
+  // base url graphql web di server
+  static String baseURLGraphQl = "https://devone.aplikasi.web.id/query";
+
+  // base url graphql web pada waktu develop
+  // static String baseURLGraphQl = "http://devone.aplikasi.web.id:3300/query";
+
+  // static String baseURLGraphQl = "http://localhost:8080/query";
+
+  static String bearerName = "absensi-sas";
+  static String accountGoogle = "absensi-google-account";
+
+  // api key google map
+  static String apikeyGoogleMap = "AIzaSyCiN7EeJsUpXVLQKFfrj3sE5OTKebjpzek";
+  static String baseUrlGoogleMapApis =
+      "https://maps.googleapis.com/maps/api/geocode/json?";
+
+  // position longitude dan latitude awal
+  static double positionLatitudeAwal = -7.566957;
+  static double positionLongitudeAwal  = 110.8080284;
+
   static double designHeightPhone = 844;
   static double designWidthPhone = 390;
 
+  // NOTE VERSI HARUS SAMA DENGAN PUBSPEC.YAML
+  static String version = "1.0.2";
+
   // color theme
+  static Color textTrueBlack = const Color(0xff000000);
   static Color textBlack = const Color(0xff212B36);
   static Color textLightGrey = const Color(0xff919EAB);
+  static Color textOrange = const Color(0xffF15A29);
+  static Color textDarkGrey = const Color(0xff637381);
+  static Color bgAddressPresensi = const Color.fromRGBO(241, 90, 41, 0.08);
+  static Color textWhite = Color(0xffFDFDFD);
+  static Color textRed = Color(0xffFF4842);
+  // background upload file
+  static Color bgUploadFile = Color.fromRGBO(207, 207, 207, 0.20);
 
   // size convertion
   static double getActualXPhone({
@@ -47,4 +78,154 @@ class Constant {
       fontWeight: FontWeight.w700,
     );
   }
+
+  static TextStyle titleH2_400_12({required BuildContext context}) {
+    return TextStyle(
+        fontSize: Constant.getActualYPhone(context: context, y: 12),
+        fontWeight: FontWeight.w400,
+        fontFamily: 'Public Sans');
+  }
+
+  static TextStyle titleH2_600_14({required BuildContext context}) {
+    return TextStyle(
+        fontSize: Constant.getActualYPhone(context: context, y: 14),
+        fontWeight: FontWeight.w600,
+        fontFamily: 'Public Sans');
+  }
+
+  static TextStyle titleH2_400_14({required BuildContext context}) {
+    return TextStyle(
+        fontSize: Constant.getActualYPhone(context: context, y: 14),
+        fontWeight: FontWeight.w400,
+        fontFamily: 'Public Sans');
+  }
+
+  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 titleH1_700_18({required BuildContext context}) {
+    return TextStyle(
+        fontSize: Constant.getActualYPhone(context: context, y: 18),
+        fontWeight: FontWeight.w700,
+        fontFamily: 'Public Sans');
+  }
+
+  static TextStyle titleH2_700({required BuildContext context}) {
+    return TextStyle(
+      fontFamily: 'Quicksand',
+      fontSize: Constant.getActualYPhone(context: context, y: 14),
+      fontWeight: FontWeight.w700,
+    );
+  }
+
+  static TextStyle titleH3_700({required BuildContext context}) {
+    return TextStyle(
+      fontFamily: 'Quicksand',
+      fontSize: Constant.getActualYPhone(context: context, y: 16),
+      fontWeight: FontWeight.w700,
+    );
+  }
+
+  static TextStyle titleH2_500({required BuildContext context}) {
+    return TextStyle(
+      fontFamily: 'Quicksand',
+      fontSize: Constant.getActualYPhone(context: context, y: 12),
+      fontWeight: FontWeight.w500,
+    );
+  }
+
+  static TextStyle titleH2_400({required BuildContext context}) {
+    return TextStyle(
+      fontFamily: 'Public Sans',
+      fontSize: Constant.getActualYPhone(context: context, y: 12),
+      fontWeight: FontWeight.w400,
+    );
+  }
+
+  static TextStyle titlePresensiH2_700({required BuildContext context}) {
+    return TextStyle(
+      fontFamily: 'Quicksand',
+      fontSize: Constant.getActualYPhone(context: context, y: 24),
+      fontWeight: FontWeight.w700,
+    );
+  }
+
+  static TextStyle time_700({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 28),
+      fontWeight: FontWeight.w700,
+      fontFamily: 'Quicksand',
+    );
+  }
+
+  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.w500,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static TextStyle date_600({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 16),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Quicksand',
+    );
+  }
+
+  static TextStyle title_screen({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 24),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static TextStyle body_16({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 16),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static TextStyle body_14({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 14),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static TextStyle body_12({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 12),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static Color primaryBlue = const Color(0xff0C53B7);
+  static Color bgBlue = const Color(0xff1890FF).withOpacity(0.16);
+  static Color primaryOrange = const Color(0xffF15A29);
+  static Color bgOrange = const Color(0xffF15A29).withOpacity(0.16);
+  static Color secondaryBlue = const Color(0xff43ADA5);
+  static Color bgSecondaryBlue = const Color(0xff43ADA5).withOpacity(0.16);
+  static Color primaryGreen = const Color(0xff229A16);
+  static Color bgGreen = const Color(0xff54D62C).withOpacity(0.08);
+  static Color primaryRed = const Color(0xffB72136);
+  static Color bgRed = const Color(0xffFF4842).withOpacity(0.08);
 }

lib/app/googleapis_location.dart

@@ -0,0 +1,41 @@
+import 'package:dio/dio.dart';
+import 'package:latlong2/latlong.dart';
+
+Future<String> searchPosition(LatLng position) async {
+  const apiKey = "AIzaSyAVUr4Ku4O1HlSkK8n9KGnUyqvsXBL-yfs";
+  final latitudeString = position.latitude.toString();
+  final longitudeString = position.longitude.toString();
+  const url = 'https://maps.googleapis.com/maps/api/geocode/json';
+
+  try {
+    final response = await Dio().get(
+      url,
+      queryParameters: {
+        'latlng': '$latitudeString,$longitudeString',
+        'key': apiKey,
+      },
+    );
+
+    if (response.statusCode == 200) {
+      final data = response.data;
+      // Mengambil compound_code dari hasil JSON
+      final plusCode = data['plus_code'];
+      if (plusCode != null && plusCode['compound_code'] != null) {
+        return plusCode['compound_code'];
+      } else {
+        print('Alamat Tidak Ditemukan');
+        return "";
+      }
+    } else {
+      print('Failed to load data');
+      return "";
+    }
+  } catch (e) {
+    print('Error: $e');
+    return "";
+  }
+}
+
+Future<String> positionToAddressGoogleApis(LatLng position) async {
+  return await searchPosition(position);
+}

lib/app/route.dart

@@ -1,4 +1,11 @@
+import 'package:absensi_sas/screen/approval/approval_screen.dart';
+import 'package:absensi_sas/screen/approval_detail/approval_detail_screen.dart';
+import 'package:absensi_sas/screen/home/home_screen_v1.dart';
+import 'package:absensi_sas/screen/presensi/presensi_screen.dart';
+import 'package:absensi_sas/screen/presensi/presensi_selfie_screen.dart';
+import 'package:absensi_sas/test_flutter_web_map.dart';
 import 'package:flutter/material.dart';
+import '../screen/home/home_screen.dart';
 import '../test_flutter_map.dart';
 import '../screen/login/login_screen.dart';
 import '../screen/splash/splash_screen.dart';
@@ -6,9 +13,25 @@ import '../screen/splash/splash_screen.dart';
 const loginRoute = "/loginRoute";
 const splashRoute = "/splashRoute";
 const testFlutterMapRoute = "/testFlutterMapRoute";
+const homeRoute = "/homeRoute";
+const presensiRoute = "/presensiRoute";
+const presensiSelfieRoute = "/presensiSelfieRoute";
+const approvalRoute = "/approvalRoute";
+const approvalDetailRoute = "/approvalDetailRoute";
+const testFlutterWebMapRoute = "/testFlutterWebMapRoute";
 
 class AppRoute {
   static Route<dynamic> generateRoute(RouteSettings settings) {
+    // flutter web map
+    if (settings.name == testFlutterWebMapRoute) {
+      return MaterialPageRoute(builder: (context) {
+        return MediaQuery(
+          data: MediaQuery.of(context)
+              .copyWith(textScaleFactor: 1.0, padding: EdgeInsets.all(0)),
+          child: TestFlutterWebMap(),
+        );
+      });
+    }
 
     // test flutter map
     if (settings.name == testFlutterMapRoute) {
@@ -21,6 +44,39 @@ class AppRoute {
       });
     }
 
+    // home route
+    if (settings.name == homeRoute) {
+      return MaterialPageRoute(builder: (context) {
+        return MediaQuery(
+          data: MediaQuery.of(context)
+              .copyWith(textScaleFactor: 1.0, padding: EdgeInsets.all(0)),
+          child: HomeScreen(),
+        );
+      });
+    }
+
+    // presensi route
+    if (settings.name == presensiRoute) {
+      return MaterialPageRoute(builder: (context) {
+        return MediaQuery(
+          data: MediaQuery.of(context)
+              .copyWith(textScaleFactor: 1.0, padding: EdgeInsets.all(0)),
+          child: PresensiScreen(),
+        );
+      });
+    }
+
+    // presensi selfie route
+    if (settings.name == presensiSelfieRoute) {
+      return MaterialPageRoute(builder: (context) {
+        return MediaQuery(
+          data: MediaQuery.of(context)
+              .copyWith(textScaleFactor: 1.0, padding: EdgeInsets.all(0)),
+          child: PresensiSelfieScreen(),
+        );
+      });
+    }
+
     // splash screen
     if (settings.name == splashRoute) {
       return MaterialPageRoute(builder: (context) {
@@ -42,6 +98,26 @@ class AppRoute {
         );
       });
     }
+    // approval
+    if (settings.name == approvalRoute) {
+      return MaterialPageRoute(builder: (context) {
+        return MediaQuery(
+          data: MediaQuery.of(context)
+              .copyWith(textScaleFactor: 1.0, padding: EdgeInsets.all(0)),
+          child: ApprovalScreen(),
+        );
+      });
+    }
+    // approvalDetail
+    if (settings.name == approvalDetailRoute) {
+      return MaterialPageRoute(builder: (context) {
+        return MediaQuery(
+          data: MediaQuery.of(context)
+              .copyWith(textScaleFactor: 1.0, padding: EdgeInsets.all(0)),
+          child: ApprovalDetailScreen(),
+        );
+      });
+    }
 
     return MaterialPageRoute(builder: (context) {
       return MediaQuery(

lib/main.dart

@@ -1,11 +1,35 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/test_flutter_web_map.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import '../app/route.dart';
+import 'package:intl/date_symbol_data_local.dart';
+
+import 'test_map_x.dart';
 // import '../test_map.dart';
 
+// final routerProvider = Provider((_) => GlobalKey<NavigatorState>());
+
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
-  runApp(const ProviderScope(child: MyApp()));
+  initializeDateFormatting();
+  await SystemChrome.setPreferredOrientations([
+    DeviceOrientation.portraitUp,
+  ]);
+  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
+    statusBarIconBrightness:
+        Brightness.dark, // this will change the brightness of the icons
+    statusBarColor: Colors.white, // or any color you want
+  ));
+  runApp(
+    ProviderScope(
+      // overrides: [
+      //   routerProvider.overrideWithValue(GlobalKey<NavigatorState>()),
+      // ],
+      child: MyApp(),
+    ),
+  );
 }
 
 class MyApp extends StatelessWidget {
@@ -23,9 +47,27 @@ class MyApp extends StatelessWidget {
       // ),
       theme: ThemeData(
         primarySwatch: Colors.orange,
+        primaryColor: Constant.textOrange,
+        primaryColorDark: Constant.textOrange,
+        primaryColorLight: Constant.textOrange,
+        colorScheme: Theme.of(context).colorScheme.copyWith(
+            primary: Constant.textOrange,
+            background: Colors.white,
+            surface: Colors.white),
+        // datePickerTheme: DatePickerThemeData(
+        //     // backgroundColor: Colors.white,
+        //     // headerHeadlineStyle:
+        //     //     Constant.h3_400(context: context).copyWith(color: Colors.white),
+        //     headerBackgroundColor: Constant.textOrange,
+        //     headerForegroundColor: Colors.white,
+        //     surfaceTintColor: Colors.white,
+        //     backgroundColor: Colors.white),
       ),
+
       // home: TestMap(),
       initialRoute: loginRoute,
+      // home: TestMapFlutterWeb(),
+      // home:TestMapX(),
       // initialRoute: testFlutterMapRoute,
       onGenerateRoute: AppRoute.generateRoute,
     );

lib/model/approval_detail_model.dart

@@ -0,0 +1,56 @@
+class ApprovalDetailModel {
+  String? id;
+  String? name;
+  String? nip;
+  String? date;
+  String? time;
+  String? address;
+  double? lat;
+  double? long;
+  String? imagePath;
+  String? statusID;
+  String? statusName;
+
+  ApprovalDetailModel(
+      {this.id,
+      this.name,
+      this.nip,
+      this.date,
+      this.time,
+      this.address,
+      this.lat,
+      this.long,
+      this.imagePath,
+      this.statusID,
+      this.statusName});
+
+  ApprovalDetailModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    name = json['Name'];
+    nip = json['nip'];
+    date = json['date'];
+    time = json['time'];
+    address = json['address'];
+    lat = json['lat'];
+    long = json['long'];
+    imagePath = json['imagePath'];
+    statusID = json['statusID'];
+    statusName = json['statusName'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['id'] = this.id;
+    data['Name'] = this.name;
+    data['nip'] = this.nip;
+    data['date'] = this.date;
+    data['time'] = this.time;
+    data['address'] = this.address;
+    data['lat'] = this.lat;
+    data['long'] = this.long;
+    data['imagePath'] = this.imagePath;
+    data['statusID'] = this.statusID;
+    data['statusName'] = this.statusName;
+    return data;
+  }
+}

lib/model/approval_model.dart

@@ -0,0 +1,68 @@
+class ApprovalModel {
+  String? id;
+  String? name;
+  String? date;
+  String? time;
+  String? typename;
+  String? typeID;
+  String? presensiTypeName;
+  String? presensitypeID;
+  String? address;
+  String? reasonType;
+  String? reasontypeID;
+  String? reasonDescription;
+  String? statusID;
+  String? statusName;
+
+  ApprovalModel(
+      {this.id,
+      this.name,
+      this.date,
+      this.time,
+      this.typename,
+      this.typeID,
+      this.presensiTypeName,
+      this.presensitypeID,
+      this.address,
+      this.reasonType,
+      this.reasontypeID,
+      this.reasonDescription,
+      this.statusID,
+      this.statusName});
+
+  ApprovalModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    name = json['name'];
+    date = json['date'];
+    time = json['time'];
+    typename = json['typename'];
+    typeID = json['typeID'];
+    presensiTypeName = json['presensiTypeName'];
+    presensitypeID = json['presensitypeID'];
+    address = json['address'];
+    reasonType = json['reasonType'];
+    reasontypeID = json['reasontypeID'];
+    reasonDescription = json['reasonDescription'];
+    statusID = json['statusID'];
+    statusName = json['statusName'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['id'] = this.id;
+    data['name'] = this.name;
+    data['date'] = this.date;
+    data['time'] = this.time;
+    data['typename'] = this.typename;
+    data['typeID'] = this.typeID;
+    data['presensiTypeName'] = this.presensiTypeName;
+    data['presensitypeID'] = this.presensitypeID;
+    data['address'] = this.address;
+    data['reasonType'] = this.reasonType;
+    data['reasontypeID'] = this.reasontypeID;
+    data['reasonDescription'] = this.reasonDescription;
+    data['statusID'] = this.statusID;
+    data['statusName'] = this.statusName;
+    return data;
+  }
+}

lib/model/approval_type_model.dart

@@ -0,0 +1,24 @@
+class ApprovalTypeModel {
+  String? id;
+  String? value;
+  String? name;
+  bool? isActive;
+
+  ApprovalTypeModel({this.id, this.value, this.name, this.isActive});
+
+  ApprovalTypeModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    value = json['value'];
+    name = json['name'];
+    isActive = json['isActive'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['id'] = this.id;
+    data['value'] = this.value;
+    data['name'] = this.name;
+    data['isActive'] = this.isActive;
+    return data;
+  }
+}

lib/model/auth_model.dart

@@ -0,0 +1,62 @@
+class AuthModel {
+  final String token;
+  final StaffModel model;
+  final String? idTokenGoogle;
+  final String? accessTokenGoogle;
+
+  AuthModel({
+    required this.token,
+    required this.model,
+    this.idTokenGoogle,
+    this.accessTokenGoogle,
+  });
+}
+
+class StaffModel {
+  String? staffId;
+  String? nip;
+  String? name;
+  String? email;
+  String? phoneNumber;
+  String? token;
+  String? idGoogleSignIn;
+  String? companyId;
+  String? companyName;
+
+  StaffModel(
+      {this.staffId,
+      this.nip,
+      this.name,
+      this.email,
+      this.phoneNumber,
+      this.token,
+      this.idGoogleSignIn,
+      this.companyId,
+      this.companyName});
+
+  StaffModel.fromJson(Map<String, dynamic> json) {
+    staffId = json['staff_id'];
+    nip = json['nip'];
+    name = json['name'];
+    email = json['email'];
+    phoneNumber = json['phone_number'];
+    token = json['token'];
+    idGoogleSignIn = json['id_google_sign_in'];
+    companyId = json['company_id'];
+    companyName = json['company_name'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['staff_id'] = this.staffId;
+    data['nip'] = this.nip;
+    data['name'] = this.name;
+    data['email'] = this.email;
+    data['phone_number'] = this.phoneNumber;
+    data['token'] = this.token;
+    data['id_google_sign_in'] = this.idGoogleSignIn;
+    data['company_id'] = this.companyId;
+    data['company_name'] = this.companyName;
+    return data;
+  }
+}

lib/model/check_distance_model.dart

@@ -0,0 +1,36 @@
+class CheckDistanceModel {
+  String? status;
+  String? message;
+  String? selfie;
+  String? unit;
+  String? maxDistance;
+  String? currentDistance;
+
+  CheckDistanceModel(
+      {this.status,
+      this.message,
+      this.selfie,
+      this.unit,
+      this.maxDistance,
+      this.currentDistance});
+
+  CheckDistanceModel.fromJson(Map<String, dynamic> json) {
+    status = json['status'];
+    message = json['message'];
+    selfie = json['selfie'];
+    unit = json['unit'];
+    maxDistance = json['max_distance'];
+    currentDistance = json['current_distance'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['status'] = this.status;
+    data['message'] = this.message;
+    data['selfie'] = this.selfie;
+    data['unit'] = this.unit;
+    data['max_distance'] = this.maxDistance;
+    data['current_distance'] = this.currentDistance;
+    return data;
+  }
+}

lib/model/check_presensi_jam_model.dart

@@ -0,0 +1,36 @@
+class CheckPresensiJamModel {
+  String? status;
+  String? message;
+  String? jamClockIn;
+  String? jamClockOut;
+  String? isAbsenClockIn;
+  String? isAbsenClockOut;
+
+  CheckPresensiJamModel(
+      {this.status,
+      this.message,
+      this.jamClockIn,
+      this.jamClockOut,
+      this.isAbsenClockIn,
+      this.isAbsenClockOut});
+
+  CheckPresensiJamModel.fromJson(Map<String, dynamic> json) {
+    status = json['status'];
+    message = json['message'];
+    jamClockIn = json['jam_clock_in'];
+    jamClockOut = json['jam_clock_out'];
+    isAbsenClockIn = json['is_absen_clock_in'];
+    isAbsenClockOut = json['is_absen_clock_out'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['status'] = this.status;
+    data['message'] = this.message;
+    data['jam_clock_in'] = this.jamClockIn;
+    data['jam_clock_out'] = this.jamClockOut;
+    data['is_absen_clock_in'] = this.isAbsenClockIn;
+    data['is_absen_clock_out'] = this.isAbsenClockOut;
+    return data;
+  }
+}

lib/model/logout_response_model.dart

@@ -0,0 +1,18 @@
+class LogoutResponseModel {
+  String? status;
+  String? message;
+
+  LogoutResponseModel({this.status, this.message});
+
+  LogoutResponseModel.fromJson(Map<String, dynamic> json) {
+    status = json['status'];
+    message = json['message'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['status'] = this.status;
+    data['message'] = this.message;
+    return data;
+  }
+}

lib/model/rekap_kehadiran_home_screen_model.dart

@@ -0,0 +1,33 @@
+class RekapKehadiranHomeScreenModel {
+  String? status;
+  String? message;
+  String? kehadiran;
+  String? tidakHadir;
+  String? lembur;
+
+  RekapKehadiranHomeScreenModel({
+    this.status,
+    this.message,
+    this.kehadiran,
+    this.tidakHadir,
+    this.lembur,
+  });
+
+  RekapKehadiranHomeScreenModel.fromJson(Map<String, dynamic> json) {
+    status = json['status'];
+    message = json['message'];
+    kehadiran = json['kehadiran'];
+    tidakHadir = json['tidak_hadir'];
+    lembur = json['lembur'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['status'] = this.status;
+    data['message'] = this.message;
+    data['kehadiran'] = this.kehadiran;
+    data['tidak_hadir'] = this.tidakHadir;
+    data['lembur'] = this.lembur;
+    return data;
+  }
+}

lib/provider/approval_filter_provider.dart

@@ -0,0 +1,28 @@
+import 'package:absensi_sas/model/approval_type_model.dart';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class ApprovalFilterProvider {
+  DateTime startDate = DateTime.now();
+  DateTime endDate = DateTime.now();
+  String keyword = "";
+  List<String> selectedApprovalType = [];
+  final approvalTypeList = [
+    ApprovalTypeModel(id: "1", name: "Presensi", isActive: false, value: "p"),
+    ApprovalTypeModel(id: "2", name: "Cuti", isActive: true, value: "c"),
+    ApprovalTypeModel(id: "3", name: "Lembur", isActive: false, value: "l"),
+  ];
+  ApprovalFilterProvider(
+      {required this.endDate,
+      required this.keyword,
+      required this.selectedApprovalType,
+      required this.startDate});
+}
+
+final approvalFilterProvider = StateProvider<ApprovalFilterProvider>((ref) {
+  return ApprovalFilterProvider(
+      selectedApprovalType: [],
+      endDate: DateTime.now(),
+      keyword: "",
+      startDate: DateTime.now());
+});

lib/provider/camera_controller_provider.dart

@@ -0,0 +1,68 @@
+import 'dart:convert';
+
+import 'package:camera/camera.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+final imgPhotoWebProvider = StateProvider<String?>((ref) => "");
+
+final cameraControllerProvider =
+    StateNotifierProvider<CameraControllerNotifier, CameraController?>((ref) {
+  return CameraControllerNotifier();
+});
+
+// StateNotifier to manage CameraController
+class CameraControllerNotifier extends StateNotifier<CameraController?> {
+  CameraControllerNotifier() : super(null) {
+    _initializeCamera();
+  }
+
+  Future<void> _initializeCamera() async {
+    WidgetsFlutterBinding.ensureInitialized();
+    try {
+      final cameras = await availableCameras();
+      if (cameras.isNotEmpty) {
+        final controller = CameraController(cameras[0], ResolutionPreset.max);
+        await controller.initialize();
+        state = controller;
+      }
+    } catch (e) {
+      print('Error initializing camera: $e');
+    }
+  }
+
+  Future<void> takePicture(
+    // ValueNotifier<XFile?> imageFile,
+    ValueNotifier<String> base64ImageString,
+    ValueNotifier<String> imagePath,
+  ) async {
+    // final flag = ValueNotifier<bool>(false);
+    if (state != null) {
+      try {
+        final image = await state!.takePicture();
+        final bytes = await image.readAsBytes();
+        String base64Image = base64Encode(bytes);
+
+        // imageFile.value = image;
+        base64ImageString.value = base64Image;
+        imagePath.value = image.path;
+
+        // final shared = await SharedPreferences.getInstance();
+        // shared.setString("base64Image", base64Image);
+      } catch (e) {
+        print('Error taking picture: $e');
+        // flag.value = false;
+        // RespErr(flag: false, message: 'Error taking picture: $e');
+      }
+    } else {
+      print('CameraController is not initialized.');
+    }
+  }
+
+  @override
+  void dispose() {
+    state?.dispose();
+    super.dispose();
+  }
+}

lib/provider/current_check_distance_provider.dart

@@ -0,0 +1,4 @@
+import 'package:absensi_sas/model/check_distance_model.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+final currentCheckDistanceProvider = StateProvider<CheckDistanceModel?>((ref) => null);

lib/provider/current_check_jam_presensi_provider.dart

@@ -0,0 +1,4 @@
+import 'package:absensi_sas/model/check_presensi_jam_model.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+final currentCheckJamPresensiProvider = StateProvider<CheckPresensiJamModel?>((ref) => null);

lib/provider/current_menu_provider.dart

@@ -0,0 +1,3 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+final currentPageProvider = StateProvider<int?>((ref) => null);

lib/provider/current_rekap_kehadiran_home_provider.dart

@@ -0,0 +1,5 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../model/rekap_kehadiran_home_screen_model.dart';
+
+final currentRekapKehadiranHomeProvider = StateProvider<RekapKehadiranHomeScreenModel?>((ref) => null);

lib/provider/current_user_provider.dart

@@ -0,0 +1,4 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../model/auth_model.dart';
+
+final currentUserProvider = StateProvider<AuthModel?>((ref) => null);

lib/provider/dio_provider.dart

@@ -0,0 +1,4 @@
+import 'package:dio/dio.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+final dioProvider = Provider<Dio>((ref) => Dio());

lib/provider/google_login_provider.dart

@@ -1,8 +1,12 @@
 import 'package:google_sign_in/google_sign_in.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
+const String googleClientID =
+    "856240587825-klh0dfjc44bovajg1rpq5vbvs4g7rh5j.apps.googleusercontent.com";
+
 final googleSignInProvider = StateProvider<GoogleSignIn>((ref) {
   return GoogleSignIn(
+    clientId: googleClientID,
     scopes: [
       'email',
       'https://www.googleapis.com/auth/contacts.readonly',
@@ -10,4 +14,10 @@ final googleSignInProvider = StateProvider<GoogleSignIn>((ref) {
   );
 });
 
-final currentUserProvider = StateProvider<GoogleSignInAccount?>((ref) => null);
+final currentUserGoogleProvider =
+    StateProvider<GoogleSignInAccount?>((ref) => null);
+
+final isNotifyFromLogout = StateProvider<bool>((ref) => false);
+
+final currentLatitudeProvider = StateProvider<double>((ref) => 0.0);
+final currentLongitudeProvider = StateProvider<double>((ref) => 0.0);

lib/provider/graphql_provider.dart

@@ -0,0 +1,30 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:graphql/client.dart';
+
+import '../app/constant.dart';
+
+final graphqlProvider = Provider.family<GraphQLClient, String>(
+  (_, token) {
+    final policies = Policies(
+      fetch: FetchPolicy.noCache,
+    );
+    return GraphQLClient(
+      link: (token != "")
+          ? HttpLink(
+              Constant.baseURLGraphQl,
+              defaultHeaders: {
+                'Authorization': 'Bearer $token',
+              },
+            )
+          : HttpLink(
+              Constant.baseURLGraphQl,
+            ),
+      cache: GraphQLCache(),
+      defaultPolicies: DefaultPolicies(
+        watchQuery: policies,
+        query: policies,
+        mutate: policies,
+      ),
+    );
+  },
+);

lib/provider/location_provider.dart

@@ -0,0 +1,10 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+final locationProvider = StateProvider<Map<String, dynamic>>((ref) {
+  return {
+    'status': null,
+    'message': null,
+    'latitude': null,
+    'longitude': null,
+  };
+});

lib/repository/auth_repository.dart

@@ -0,0 +1,55 @@
+import 'package:absensi_sas/model/logout_response_model.dart';
+import 'package:google_sign_in/google_sign_in.dart';
+
+import '../model/auth_model.dart';
+import 'base_repository.dart';
+
+class AuthRepository extends BaseRepository {
+  AuthRepository({required super.graphql, required super.dio});
+
+  // login
+  Future<AuthModel> login(
+    String email,
+    String idGoogleSignIn,
+  ) async {
+    const String query =
+        r'''mutation($emailParam:String!, $id_google_sign_in_Param:String!){ loginAttendance(email:$emailParam, id_google_sign_in:$id_google_sign_in_Param){ staff_id nip name email phone_number token id_google_sign_in company_id company_name } }''';
+
+    Map<String, dynamic> inpVariables = {
+      "emailParam": email,
+      "id_google_sign_in_Param": idGoogleSignIn
+    };
+    final resp = await postGraphQlMutation(query, inpVariables);
+    // final loginData = AuthModel.fromJson(resp['userLogin']);
+
+    print('obj loginAttendance : ${resp["loginAttendance"]}');
+    print('token : ${resp["loginAttendance"]["token"]}');
+
+    final result = AuthModel(
+      token: resp["loginAttendance"]["token"],
+      model: StaffModel.fromJson(resp["loginAttendance"]),
+    );
+    return result;
+  }
+
+  // logout
+  Future<LogoutResponseModel> logout(
+      String email, String idGoogleSignIn) async {
+    const String query =
+        r'''mutation($emailParam:String!, $id_google_sign_in_Param:String!){ logoutAttendance(email:$emailParam, id_google_sign_in:$id_google_sign_in_Param){ status message } }''';
+
+    Map<String, dynamic> inpVariables = {
+      "emailParam": email,
+      "id_google_sign_in_Param": idGoogleSignIn
+    };
+    final resp = await postGraphQlMutation(query, inpVariables);
+    // final loginData = AuthModel.fromJson(resp['userLogin']);
+
+    // final result = resp['logoutAttendance']['status'];
+
+    final result = LogoutResponseModel(
+        message: resp['logoutAttendance']['message'],
+        status: resp['logoutAttendance']['status']);
+    return result;
+  }
+}

lib/repository/base_repository.dart

@@ -0,0 +1,189 @@
+import 'dart:convert';
+import 'dart:io';
+
+import 'package:dio/dio.dart';
+import 'package:graphql/client.dart';
+
+abstract class BaseRepository {
+  final Dio dio;
+  final GraphQLClient graphql;
+  BaseRepository({required this.dio, required this.graphql});
+
+  // POST PAKE GRAPHQL
+  Future<Map<String, dynamic>> postGraphQlMutation(
+      String query, Map<String, dynamic> inpVariables) async {
+    try {
+      final options =
+          MutationOptions(document: gql(query), variables: inpVariables);
+      final QueryResult result = await graphql.mutate(options);
+
+      if (result.hasException) {
+        // throw BaseRepositoryException(message: result.exception.toString());
+        if (result.exception != null) {
+          if (result.exception!.graphqlErrors.isNotEmpty) {
+            String error = "";
+            if (result.exception!.graphqlErrors[0].message != "") {
+              error += result.exception!.graphqlErrors[0].message;
+              throw BaseRepositoryException(message: error);
+            }
+          }
+        }
+      }
+
+      // return result.data!;
+      return result.data!;
+    } catch (e) {
+      throw BaseRepositoryException(message: e.toString());
+    }
+  }
+
+  Future<Map<String, dynamic>> postGraphQlQuery(
+      String query, Map<String, dynamic> inpVariables) async {
+    try {
+      final options =
+          QueryOptions(document: gql(query), variables: inpVariables);
+      final QueryResult result = await graphql.query(options);
+
+      if (result.hasException) {
+        // throw BaseRepositoryException(message: result.exception.toString());
+        if (result.exception != null) {
+          if (result.exception!.graphqlErrors.isNotEmpty) {
+            if (result.exception!.graphqlErrors[0].message != "") {
+              throw BaseRepositoryException(
+                message: result.exception!.graphqlErrors[0].message.toString(),
+              );
+            }
+          }
+        }
+      }
+
+      // throw BaseRepositoryException(message: result.exception.toString());
+
+      return result.data!;
+    } catch (e) {
+      throw BaseRepositoryException(message: e.toString());
+    }
+  }
+
+  // with handling
+  Future<Map<String, dynamic>> postGraphQlQueryX(
+      String query, Map<String, dynamic> inpVariables) async {
+    try {
+      final options =
+          QueryOptions(document: gql(query), variables: inpVariables);
+      final QueryResult result = await graphql.query(options);
+
+      if (result.hasException) {
+        if (result.exception != null) {
+          if (result.exception!.graphqlErrors.isNotEmpty
+              is BaseRepositoryException) {
+            final error = result.exception!.graphqlErrors[0];
+            BaseRepositoryException exception =
+                result.exception!.linkException as BaseRepositoryException;
+            var errorMessage = exception.message;
+            print(errorMessage);
+            throw BaseRepositoryException(
+              message: errorMessage,
+            );
+          }
+        }
+      }
+
+      return result.data!;
+    } catch (e) {
+      throw BaseRepositoryException(message: e.toString());
+    }
+  }
+
+  // NATIVE POST PAKE DIO
+  Future<Map<String, dynamic>> post({
+    required Map<String, dynamic> param,
+    required String service,
+    String? token,
+  }) async {
+    try {
+      final response = await dio.post(
+        service,
+        data: jsonEncode(param),
+        options: Options(
+          headers: token != null
+              ? {
+                  HttpHeaders.contentTypeHeader: "application/json",
+                  HttpHeaders.authorizationHeader: "Bearer $token",
+                }
+              : {
+                  HttpHeaders.contentTypeHeader: "application/json",
+                },
+          contentType: "application/json",
+        ),
+      );
+      if (response.statusCode != 200) {
+        throw BaseRepositoryException(
+          message: "Invalid Http Response ${response.statusCode}",
+        );
+      }
+      Map<String, dynamic> jsonData = jsonDecode(response.data);
+      if (jsonData["status"] != "OK") {
+        throw BaseRepositoryException(
+          message: jsonData["message"],
+        );
+      } else {
+        return jsonData;
+      }
+    } on DioError catch (e) {
+      throw BaseRepositoryException(message: e.message);
+    } on SocketException catch (e) {
+      throw BaseRepositoryException(message: e.message);
+    } on BaseRepositoryException catch (e) {
+      throw BaseRepositoryException(message: e.message);
+    }
+  }
+
+  Future<Map<String, dynamic>> get({
+    required String service,
+    String? token,
+  }) async {
+    try {
+      final response = await dio.get(
+        service,
+        options: Options(
+          headers: token != null
+              ? {
+                  HttpHeaders.contentTypeHeader: "application/json",
+                  HttpHeaders.authorizationHeader: "Bearer $token",
+                }
+              : {
+                  HttpHeaders.contentTypeHeader: "application/json",
+                },
+          contentType: "application/json",
+        ),
+      );
+      if (response.statusCode != 200) {
+        throw BaseRepositoryException(
+          message: "Invalid Http Response ${response.statusCode}",
+        );
+      }
+      Map<String, dynamic> jsonData = jsonDecode(response.data);
+      if (jsonData["status"] != "OK") {
+        throw BaseRepositoryException(
+          message: jsonData["message"],
+        );
+      } else {
+        return jsonData;
+      }
+    } on DioError catch (e) {
+      throw BaseRepositoryException(message: e.message);
+    } on SocketException catch (e) {
+      throw BaseRepositoryException(message: e.message);
+    } on BaseRepositoryException catch (e) {
+      throw BaseRepositoryException(message: e.message);
+    }
+  }
+}
+
+class BaseRepositoryException implements Exception {
+  final String? message;
+  BaseRepositoryException({
+    required this.message,
+  });
+}

lib/repository/googleapis_repository.dart

@@ -0,0 +1,45 @@
+import 'package:dio/dio.dart';
+
+import 'base_repository.dart';
+
+class GoogleApisRepository extends BaseRepository {
+  GoogleApisRepository({required super.graphql, required super.dio});
+
+  Future<String> getAddressFromCoordinates(
+      String latitude, String longitude) async {
+    final dio = Dio();
+    const apiKey = "AIzaSyAVUr4Ku4O1HlSkK8n9KGnUyqvsXBL-yfs";
+    final latitudeString = latitude.toString();
+    final longitudeString = longitude.toString();
+    const url =
+        'https://maps.googleapis.com/maps/api/geocode/json';
+
+    try {
+      final response = await dio.get(
+        url,
+        queryParameters: {
+          'latlng': '$latitudeString,$longitudeString',
+          'key': apiKey,
+        },
+      );
+
+      if (response.statusCode == 200) {
+        final data = response.data;
+        // Mengambil compound_code dari hasil JSON
+        final plusCode = data['plus_code'];
+        if (plusCode != null && plusCode['compound_code'] != null) {
+          return plusCode['compound_code'];
+        } else {
+          print('Alamat Tidak Ditemukan');
+          return "";
+        }
+      } else {
+        print('Failed to load data');
+        return "";
+      }
+    } catch (e) {
+      print('Error: $e');
+      return "";
+    }
+  }
+}

lib/repository/presensi_repository.dart

@@ -0,0 +1,226 @@
+import 'package:absensi_sas/model/check_distance_model.dart';
+import 'package:absensi_sas/model/check_presensi_jam_model.dart';
+import '../model/rekap_kehadiran_home_screen_model.dart';
+import 'base_repository.dart';
+
+class PresensiRepository extends BaseRepository {
+  PresensiRepository({required super.graphql, required super.dio});
+
+  // check distance
+  Future<CheckDistanceModel> checkDistance(
+    String M_StaffID,
+    String M_CompanyID,
+    String CurrentLatitude,
+    String CurrentLongitude,
+  ) async {
+    const String query =
+        r'''query($M_StaffID:String!, $M_CompanyID:String!, $CurrentLatitude:String!, $CurrentLongitude:String!){ queryCheckDistance(M_StaffID:$M_StaffID, M_CompanyID:$M_CompanyID, CurrentLatitude:$CurrentLatitude, CurrentLongitude:$CurrentLongitude){ status message selfie unit max_distance current_distance } }''';
+
+    Map<String, dynamic> inpVariables = {
+      "M_StaffID": M_StaffID,
+      "M_CompanyID": M_CompanyID,
+      "CurrentLatitude": CurrentLatitude,
+      "CurrentLongitude": CurrentLongitude,
+    };
+    final resp = await postGraphQlMutation(query, inpVariables);
+    // final loginData = AuthModel.fromJson(resp['userLogin']);
+
+    // print(inpVariables);
+
+    print('obj queryCheckDistance : ${resp["queryCheckDistance"]}');
+
+    // final result = AuthModel(
+    //   token: resp["loginAttendance"]["token"],
+    //   model: StaffModel.fromJson(resp["loginAttendance"]),
+    // );
+
+    final result = CheckDistanceModel(
+        currentDistance: resp['queryCheckDistance']['current_distance'],
+        maxDistance: resp['queryCheckDistance']['max_distance'],
+        message: resp['queryCheckDistance']['message'],
+        selfie: resp['queryCheckDistance']['selfie'],
+        status: resp['queryCheckDistance']['status'],
+        unit: resp['queryCheckDistance']['unit']);
+    return result;
+  }
+
+  // presensi normal Clock In
+  Future<String> presensiNormalClockIn(
+      String T_TransactionM_StaffID,
+      String T_TransactionM_CompanyID,
+      String T_TransactionCurrentLatitude,
+      String T_TransactionCurrentLongitude,
+      String T_TransactionCurrentDistance,
+      String T_TransactionSelfiePhoto,
+      String token,
+      String isSelfie,
+      Map<String, dynamic> paramInpVariables) async {
+    const String query =
+        r'''mutation($T_TransactionM_StaffID:String!, $T_TransactionM_CompanyID:String!, $T_TransactionCurrentLatitude:String!, $T_TransactionCurrentLongitude:String!, $T_TransactionCurrentDistance:String!, $T_TransactionSelfiePhoto:String, $token:String!, $isSelfie:String!){ mutationClockInAttendance(T_TransactionM_StaffID:$T_TransactionM_StaffID, T_TransactionM_CompanyID:$T_TransactionM_CompanyID, T_TransactionCurrentLatitude:$T_TransactionCurrentLatitude, T_TransactionCurrentLongitude:$T_TransactionCurrentLongitude, T_TransactionCurrentDistance:$T_TransactionCurrentDistance, T_TransactionSelfiePhoto:$T_TransactionSelfiePhoto, token:$token, isSelfie:$isSelfie){ status message } }''';
+
+    Map<String, dynamic> inpVariables = paramInpVariables;
+    print(paramInpVariables);
+
+    final resp = await postGraphQlMutation(query, inpVariables);
+
+    // print(inpVariables);
+
+    print(
+        'obj mutationClockInAttendance : ${resp["mutationClockInAttendance"]}');
+
+    // final result = AuthModel(
+    //   token: resp["loginAttendance"]["token"],
+    //   model: StaffModel.fromJson(resp["loginAttendance"]),
+    // );
+
+    final result = resp["mutationClockInAttendance"]['status'];
+    return result;
+  }
+
+  // presensi normal clock Out
+  Future<String> presensiNormalClockOut(
+      String T_TransactionM_StaffID,
+      String T_TransactionM_CompanyID,
+      String T_TransactionCurrentLatitude,
+      String T_TransactionCurrentLongitude,
+      String T_TransactionCurrentDistance,
+      String T_TransactionSelfiePhoto,
+      String token,
+      String isSelfie,
+      Map<String, dynamic> paramInpVariables) async {
+    const String query =
+        r'''mutation(
+          $T_TransactionM_StaffID:String!, 
+          $T_TransactionM_CompanyID:String!, 
+          $T_TransactionCurrentLatitude:String!, 
+          $T_TransactionCurrentLongitude:String!, 
+          $T_TransactionCurrentDistance:String!, 
+          $T_TransactionSelfiePhoto:String, 
+          $token:String!, 
+          $isSelfie:String!
+          ){ 
+          mutationClockOutAttendance(
+            T_TransactionM_StaffID:$T_TransactionM_StaffID, 
+            T_TransactionM_CompanyID:$T_TransactionM_CompanyID, 
+            T_TransactionCurrentLatitude:$T_TransactionCurrentLatitude, 
+            T_TransactionCurrentLongitude:$T_TransactionCurrentLongitude, 
+            T_TransactionCurrentDistance:$T_TransactionCurrentDistance, 
+            T_TransactionSelfiePhoto:$T_TransactionSelfiePhoto, 
+            token:$token, isSelfie:$isSelfie
+          ){ 
+            status 
+            message 
+          } 
+        }''';
+
+    Map<String, dynamic> inpVariables = paramInpVariables;
+    print(paramInpVariables);
+
+    final resp = await postGraphQlMutation(query, inpVariables);
+
+    // print(inpVariables);
+
+    print(
+        'obj mutationClockOutAttendance : ${resp["mutationClockOutAttendance"]}');
+
+    // final result = AuthModel(
+    //   token: resp["loginAttendance"]["token"],
+    //   model: StaffModel.fromJson(resp["loginAttendance"]),
+    // );
+
+    final result = resp["mutationClockOutAttendance"]['status'];
+    return result;
+  }
+
+  // check presensi jam
+  Future<CheckPresensiJamModel> checkPresensiJam(
+    String M_StaffID,
+    String M_CompanyID,
+    String token,
+    Map<String, dynamic> paramInpVariables,
+  ) async {
+    const String query =
+        r'''query($M_StaffID:String!, $M_CompanyID:String!, $token:String!){ 
+              queryCheckTimeAttendance(M_StaffID:$M_StaffID, M_CompanyID:$M_CompanyID, token:$token){ 
+                status 
+                message 
+                jam_clock_in 
+                jam_clock_out 
+                is_absen_clock_in 
+                is_absen_clock_out 
+              } 
+        }''';
+
+    // Map<String, dynamic> inpVariables = paramInpVariables;
+
+    // Map<String, dynamic> X = {
+    //   "M_StaffID": M_StaffID,
+    //   "M_CompanyID": M_CompanyID,
+    //   "token": token+"1",
+    // };
+
+    print(paramInpVariables);
+
+    final resp = await postGraphQlQuery(query, paramInpVariables);
+    // final resp = await postGraphQlQueryX(query, X);
+
+    // print(inpVariables);
+
+    print('obj queryCheckTimeAttendance : ${resp["queryCheckTimeAttendance"]}');
+
+    final result = CheckPresensiJamModel(
+      isAbsenClockIn: resp['queryCheckTimeAttendance']['is_absen_clock_in'],
+      isAbsenClockOut: resp['queryCheckTimeAttendance']['is_absen_clock_out'],
+      jamClockIn: resp['queryCheckTimeAttendance']['jam_clock_in'],
+      jamClockOut: resp['queryCheckTimeAttendance']['jam_clock_out'],
+      message: resp['queryCheckTimeAttendance']['message'],
+      status: resp['queryCheckTimeAttendance']['status'],
+    );
+    return result;
+  }
+
+  // rekap kehadiran home screen
+  Future<RekapKehadiranHomeScreenModel> rekapKehadiranHomeScreen(
+    String M_StaffID,
+    String M_CompanyID,
+    String token,
+    Map<String, dynamic> paramInpVariables,
+  ) async {
+    const String query =
+        r'''query($M_StaffID:String!, $M_CompanyID:String!, $token:String!){ 
+              queryRekapKehadiranHomeScreen(M_StaffID:$M_StaffID, M_CompanyID:$M_CompanyID, token:$token){ 
+                status 
+                message 
+                kehadiran 
+                tidak_hadir 
+                lembur 
+              } 
+        }''';
+
+    // Map<String, dynamic> inpVariables = paramInpVariables;
+
+    // Map<String, dynamic> X = {
+    //   "M_StaffID": M_StaffID,
+    //   "M_CompanyID": M_CompanyID,
+    //   "token": token+"1",
+    // };
+
+    print(paramInpVariables);
+
+    final resp = await postGraphQlQuery(query, paramInpVariables);
+    // final resp = await postGraphQlQueryX(query, X);
+
+    // print(inpVariables);
+
+    print('obj queryRekapKehadiranHomeScreen : ${resp["queryRekapKehadiranHomeScreen"]}');
+
+    final result = RekapKehadiranHomeScreenModel(
+      kehadiran: resp['queryRekapKehadiranHomeScreen']['kehadiran'],
+      tidakHadir: resp['queryRekapKehadiranHomeScreen']['tidak_hadir'],
+      lembur: resp['queryRekapKehadiranHomeScreen']['lembur'],
+      message: resp['queryRekapKehadiranHomeScreen']['message'],
+      status: resp['queryRekapKehadiranHomeScreen']['status'],
+    );
+    return result;
+  }
+}

lib/screen/approval/approval_mockup.dart

@@ -0,0 +1,158 @@
+import 'package:absensi_sas/model/approval_detail_model.dart';
+import 'package:absensi_sas/model/approval_model.dart';
+
+List<ApprovalModel> approvalCardList = [
+  ApprovalModel(
+      id: "1",
+      name: "Alfianto Andy P",
+      date: "21 Feb 2024",
+      time: "08:03",
+      typeID: "1",
+      typename: "Presensi",
+      presensitypeID: "1",
+      presensiTypeName: "Clock  In",
+      address:
+          "Jl. Kwini No.1, RT.5/RW.1, Senen, Kec. Senen, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10410",
+      statusID: "",
+      statusName: ""),
+  ApprovalModel(
+      id: "1",
+      name: "Alfianto Andy P",
+      date: "21 Feb 2024",
+      time: "08:03",
+      typeID: "1",
+      typename: "Presensi",
+      presensitypeID: "1",
+      presensiTypeName: "Clock  In",
+      address:
+          "Jl. Kwini No.1, RT.5/RW.1, Senen, Kec. Senen, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10410",
+      statusID: "1",
+      statusName: "Approve"),
+  ApprovalModel(
+      id: "2",
+      name: "Alfianto Andy P",
+      date: "21 Feb 2024",
+      time: "17:03",
+      typeID: "1",
+      typename: "Presensi",
+      presensitypeID: "2",
+      presensiTypeName: "Clock  Out",
+      address:
+          "Jl. Kwini No.1, RT.5/RW.1, Senen, Kec. Senen, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10410",
+      statusID: "2",
+      statusName: "Reject"),
+  ApprovalModel(
+      id: "3",
+      name: "Hanan Askarim",
+      date: "06 Jan 2024 - 06 Jan 2024",
+      time: "0",
+      typeID: "2",
+      typename: "Cuti",
+      statusID: "0",
+      reasonType: "Cuti Tahunan",
+      reasonDescription: "Kondangan",
+      reasontypeID: "1",
+      statusName: "0"),
+  ApprovalModel(
+      id: "4",
+      name: "Hanan Askarim",
+      date: "06 Jan 2024 - 06 Jan 2024",
+      time: "0",
+      typeID: "2",
+      typename: "Cuti",
+      statusID: "1",
+      reasonType: "Cuti Tahunan",
+      reasonDescription: "Tidur",
+      reasontypeID: "1",
+      statusName: "Approve"),
+  ApprovalModel(
+      id: "4",
+      name: "Hanan Askarim",
+      date: "06 Jan 2024 - 06 Jan 2024",
+      time: "0",
+      typeID: "2",
+      typename: "Cuti",
+      statusID: "2",
+      reasonType: "Cuti Tahunan",
+      reasonDescription: "Tidur",
+      reasontypeID: "1",
+      statusName: "Reject"),
+  ApprovalModel(
+      id: "5",
+      name: "Stephen Kusumo",
+      date: "06 Jan 2024",
+      time: "17:00 - 19:00",
+      typeID: "3",
+      typename: "Lembur",
+      statusID: "0",
+      reasonType: "0",
+      reasonDescription: "Menyelesaikan project Petty Cash",
+      reasontypeID: "0",
+      statusName: ""),
+  ApprovalModel(
+      id: "5",
+      name: "Stephen Kusumo",
+      date: "06 Jan 2024",
+      time: "17:00 - 19:00",
+      typeID: "3",
+      typename: "Lembur",
+      statusID: "1",
+      reasonType: "0",
+      reasonDescription: "Menyelesaikan project Petty Cash",
+      reasontypeID: "0",
+      statusName: "Approve"),
+  ApprovalModel(
+      id: "5",
+      name: "Stephen Kusumo",
+      date: "06 Jan 2024",
+      time: "17:00 - 19:00",
+      typeID: "3",
+      typename: "Lembur",
+      statusID: "2",
+      reasonType: "0",
+      reasonDescription: "Menyelesaikan project Petty Cash",
+      reasontypeID: "0",
+      statusName: "Reject"),
+];
+
+List<ApprovalDetailModel> approvalDetailMockup = [
+  ApprovalDetailModel(
+      id: "1",
+      name: "Alfianto Andy P",
+      address:
+          "Jl. Kwini No.1, RT.5/RW.1, Senen, Kec. Senen, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10410",
+      date: "06 Feb 2024",
+      time: "08:08",
+      nip: "SS202308",
+      lat: -7.539538,
+      long: 110.798357,
+      imagePath: "https://images4.alphacoders.com/262/262196.jpg",
+      statusID: "1",
+      statusName: "Approve"),
+  ApprovalDetailModel(
+      id: "2",
+      name: "Alfianto Andy P",
+      address:
+          "Jl. Kwini No.1, RT.5/RW.1, Senen, Kec. Senen, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10410",
+      date: "06 Feb 2024",
+      time: "08:08",
+      nip: "SS202308",
+      lat: -7.539538,
+      long: 110.798357,
+      imagePath: "https://images3.alphacoders.com/147/147465.jpg",
+      statusID: "2",
+      statusName: "Reject"),
+  ApprovalDetailModel(
+      id: "3",
+      name: "Alfianto Andy P",
+      address:
+          "Jl. Kwini No.1, RT.5/RW.1, Senen, Kec. Senen, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10410",
+      date: "06 Feb 2024",
+      time: "08:08",
+      nip: "SS202308",
+      lat: -7.539538,
+      long: 110.798357,
+      imagePath: "https://images4.alphacoders.com/146/146466.jpg",
+      statusID: "0",
+      statusName: ""),
+];

lib/screen/approval/approval_screen.dart

@@ -0,0 +1,159 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/app/route.dart';
+import 'package:absensi_sas/model/approval_model.dart';
+
+import 'package:absensi_sas/provider/approval_filter_provider.dart';
+import 'package:absensi_sas/screen/approval/approval_mockup.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_card_cuti.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_card_lembur.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_card_presensi.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_filter_chip_widget.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_filter_widget.dart';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class ApprovalScreen extends HookConsumerWidget {
+  const ApprovalScreen({super.key});
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final approvalFilterTempProvider = ref.watch(approvalFilterProvider);
+    final approvalTypeList = approvalFilterTempProvider.approvalTypeList;
+    final scrollCtr = useScrollController();
+
+    final List<ApprovalModel> dataMockup = approvalCardList;
+
+    onTap(String tipeID) {
+      if (tipeID == "1") {
+        print("Tipe Id 1");
+        Navigator.pushNamed(context, approvalDetailRoute);
+      }
+    }
+
+    return SafeArea(
+      minimum: EdgeInsets.only(
+          top: Constant.getActualYPhone(context: context, y: 30)),
+      child: Scaffold(
+        backgroundColor: Constant.textWhite,
+        appBar: AppBar(
+          backgroundColor: Colors.white,
+          shadowColor: Colors.white,
+          surfaceTintColor: Colors.white,
+          scrolledUnderElevation: 0,
+          elevation: 0,
+          leading: Container(
+            child: IconButton(
+                onPressed: () {
+                  Navigator.pop(context);
+                },
+                icon: Icon(Icons.arrow_back_ios_new_rounded)),
+          ),
+          centerTitle: true,
+          title: Text(
+            "Approval",
+            style: Constant.title_screen(context: context),
+          ),
+        ),
+        body: Padding(
+          padding: EdgeInsets.symmetric(
+              horizontal: Constant.getActualXPhone(context: context, x: 20)),
+          child: Column(
+            children: [
+              Container(
+                color: Colors.white,
+                child: Row(
+                  children: [
+                    ApprovalFilterWidget(),
+                    Expanded(
+                      child: LayoutBuilder(
+                        builder: (context, constraints) {
+                          return Container(
+                            width: constraints.maxWidth,
+                            child: SingleChildScrollView(
+                              scrollDirection: Axis.horizontal,
+                              child: Row(
+                                children: [
+                                  ...approvalTypeList.map(
+                                      (e) => ApprovalFilterChipWidget(data: e))
+                                ],
+                              ),
+                            ),
+                          );
+                        },
+                      ),
+                    )
+                  ],
+                ),
+              ),
+              SizedBox(
+                height: Constant.getActualYPhone(context: context, y: 27),
+              ),
+              Expanded(child: Container(
+                // color: Colors.red,
+                child: LayoutBuilder(builder: (context, Constraints) {
+                  return Container(
+                    height: Constraints.maxWidth,
+                    child: RefreshIndicator(
+                      onRefresh: () async {
+                        print("Refresh");
+                      },
+                      child: ListView(
+                        controller: scrollCtr,
+                        children: [
+                          Container(
+                            margin: EdgeInsets.only(bottom: 28),
+                            width: MediaQuery.of(context).size.width,
+                            child: Row(
+                              children: [
+                                Container(
+                                  child: Text(
+                                    "Februari 2024",
+                                    style: Constant.body_16(context: context)
+                                        .copyWith(fontWeight: FontWeight.w600),
+                                  ),
+                                ),
+                                Expanded(
+                                  child: Container(
+                                    margin: EdgeInsets.only(left: 10),
+                                    child: Divider(
+                                      height: 10,
+                                    ),
+                                  ),
+                                )
+                              ],
+                            ),
+                          ),
+                          ...dataMockup.map((e) {
+                            switch (e.typeID) {
+                              case "1":
+                                return ApprovalCardPresensi(
+                                  data: e,
+                                  onTap: onTap,
+                                );
+                              case "2":
+                                return ApprovalCardCuti(
+                                  data: e,
+                                );
+                              case "3":
+                                return ApprovalCardLembur(
+                                  data: e,
+                                );
+                              default:
+                                return Container();
+                            }
+                          }).toList()
+                        ],
+                      ),
+                    ),
+                  );
+                }),
+              ))
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screen/approval/widget/approval_card_cuti.dart

@@ -0,0 +1,200 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/model/approval_model.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_card_status_widget.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_dialog_confirmation.dart';
+import 'package:absensi_sas/widget/custom_button_approval.dart';
+import 'package:eva_icons_flutter/eva_icons_flutter.dart';
+import 'package:flutter/material.dart';
+import 'package:iconify_flutter/iconify_flutter.dart';
+import 'package:iconify_flutter/icons/heroicons.dart';
+
+class ApprovalCardCuti extends StatelessWidget {
+  const ApprovalCardCuti({super.key, required this.data});
+  final ApprovalModel data;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(
+          bottom: Constant.getActualYPhone(context: context, y: 20)),
+      child: InkWell(
+        customBorder: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+        ),
+        splashColor: Constant.bgOrange,
+        overlayColor: MaterialStatePropertyAll(Constant.bgOrange),
+        onTap: () {
+          print("tapped");
+        },
+        child: Ink(
+            decoration: BoxDecoration(boxShadow: [
+              BoxShadow(
+                color: Colors.grey.withOpacity(0.12),
+                offset: Offset(0.0, 10), //(x,y)
+                blurRadius: 4.0,
+              ),
+              BoxShadow(
+                color: Colors.grey.withOpacity(0.2),
+                offset: Offset(0.0, 0), //(x,y)
+                blurRadius: 2.0,
+              ),
+            ], color: Colors.white, borderRadius: BorderRadius.circular(16)),
+            child: Column(
+              children: [
+                Container(
+                  padding: EdgeInsets.symmetric(
+                      horizontal:
+                          Constant.getActualXPhone(context: context, x: 20),
+                      vertical:
+                          Constant.getActualYPhone(context: context, y: 16)),
+                  child: Column(
+                    children: [
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Text(
+                            data.name ?? "",
+                            style: Constant.body_16(context: context),
+                          ),
+                          Container(
+                            decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(8),
+                                color: Constant.primaryOrange.withOpacity(0.2)),
+                            padding: EdgeInsets.symmetric(
+                                horizontal: Constant.getActualXPhone(
+                                    context: context, x: 8),
+                                vertical: Constant.getActualYPhone(
+                                    context: context, y: 1)),
+                            child: Text(
+                              data.typename ?? "",
+                              style: Constant.body_12(context: context)
+                                  .copyWith(color: Constant.primaryOrange),
+                            ),
+                          )
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 8),
+                      ),
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Icon(
+                            EvaIcons.calendar,
+                            color: Constant.primaryOrange,
+                            size: 14,
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 8),
+                          ),
+                          Flexible(
+                            child: Text(
+                              data.date ?? "",
+                              style: Constant.titleH2_400_14(context: context)
+                                  .copyWith(color: Constant.textDarkGrey),
+                            ),
+                          )
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 8),
+                      ),
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          // Icon(
+                          // ,
+                          //   color: Constant.primaryOrange,
+                          //   size: 14,
+                          // ),
+                          Iconify(
+                            Heroicons.chat_bubble_bottom_center_text_solid,
+                            color: Constant.primaryOrange,
+                            size: 14,
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 8),
+                          ),
+
+                          Flexible(
+                            child: Text(
+                              "${data.reasonType}  ▪️  ${data.reasonDescription}",
+                              style: Constant.titleH2_400_14(context: context)
+                                  .copyWith(color: Constant.textDarkGrey),
+                            ),
+                          ),
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 20),
+                      ),
+                      Row(
+                        children: List.generate(
+                            1000 ~/ 10,
+                            (index) => Expanded(
+                                  child: Container(
+                                    color: index % 2 == 0
+                                        ? Colors.transparent
+                                        : Constant.textLightGrey
+                                            .withOpacity(0.24),
+                                    height: 1,
+                                  ),
+                                )),
+                      ),
+                      if (data.statusID != "1" && data.statusID != "2")
+                        SizedBox(
+                          height:
+                              Constant.getActualYPhone(context: context, y: 20),
+                        ),
+                      if (data.statusID != "1" && data.statusID != "2")
+                        Row(
+                          children: [
+                            Expanded(
+                              child: CustomButtonWhite(
+                                  btnText: "Reject",
+                                  onPressed: () {
+                                    ApprovalDialogConfirmation(
+                                        context: context,
+                                        confirmFunc: () {},
+                                        textInformation: "Menolak ",
+                                        staffName: data.name ?? "",
+                                        typename: data.typename ?? "");
+                                  }),
+                            ),
+                            SizedBox(
+                              width: Constant.getActualXPhone(
+                                  context: context, x: 24),
+                            ),
+                            Expanded(
+                              child: CustomButtonOrange(
+                                  btnText: "Approve",
+                                  onPressed: () {
+                                    ApprovalDialogConfirmation(
+                                        context: context,
+                                        confirmFunc: () {},
+                                        textInformation: "Menyetujui ",
+                                        staffName: data.name ?? "",
+                                        typename: data.typename ?? "");
+                                  }),
+                            ),
+                          ],
+                        )
+                    ],
+                  ),
+                ),
+                AprrovalCardStatusWidget(
+                  statusID: data.statusID ?? "",
+                  statusName: data.statusName ?? '',
+                )
+              ],
+            )),
+      ),
+    );
+  }
+}

lib/screen/approval/widget/approval_card_lembur.dart

@@ -0,0 +1,200 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/model/approval_model.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_card_status_widget.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_dialog_confirmation.dart';
+import 'package:absensi_sas/widget/custom_button_approval.dart';
+import 'package:eva_icons_flutter/eva_icons_flutter.dart';
+import 'package:flutter/material.dart';
+import 'package:iconify_flutter/iconify_flutter.dart';
+import 'package:iconify_flutter/icons/heroicons.dart';
+
+class ApprovalCardLembur extends StatelessWidget {
+  const ApprovalCardLembur({super.key, required this.data});
+  final ApprovalModel data;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(
+          bottom: Constant.getActualYPhone(context: context, y: 20)),
+      child: InkWell(
+        customBorder: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+        ),
+        splashColor: Constant.bgOrange,
+        overlayColor: MaterialStatePropertyAll(Constant.bgOrange),
+        onTap: () {
+          print("tapped");
+        },
+        child: Ink(
+            decoration: BoxDecoration(boxShadow: [
+              BoxShadow(
+                color: Colors.grey.withOpacity(0.12),
+                offset: Offset(0.0, 10), //(x,y)
+                blurRadius: 4.0,
+              ),
+              BoxShadow(
+                color: Colors.grey.withOpacity(0.2),
+                offset: Offset(0.0, 0), //(x,y)
+                blurRadius: 2.0,
+              ),
+            ], color: Colors.white, borderRadius: BorderRadius.circular(16)),
+            child: Column(
+              children: [
+                Container(
+                  padding: EdgeInsets.symmetric(
+                      horizontal:
+                          Constant.getActualXPhone(context: context, x: 20),
+                      vertical:
+                          Constant.getActualYPhone(context: context, y: 16)),
+                  child: Column(
+                    children: [
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Text(
+                            data.name ?? "",
+                            style: Constant.body_16(context: context),
+                          ),
+                          Container(
+                            decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(8),
+                                color: Constant.bgSecondaryBlue),
+                            padding: EdgeInsets.symmetric(
+                                horizontal: Constant.getActualXPhone(
+                                    context: context, x: 8),
+                                vertical: Constant.getActualYPhone(
+                                    context: context, y: 1)),
+                            child: Text(
+                              data.typename ?? "",
+                              style: Constant.body_12(context: context)
+                                  .copyWith(color: Constant.secondaryBlue),
+                            ),
+                          )
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 8),
+                      ),
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Icon(
+                            EvaIcons.calendar,
+                            color: Constant.textOrange,
+                            size: 14,
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 8),
+                          ),
+                          Flexible(
+                            child: Text(
+                              data.date ?? "",
+                              style: Constant.titleH2_400_14(context: context)
+                                  .copyWith(color: Constant.textDarkGrey),
+                            ),
+                          )
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 8),
+                      ),
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          // Icon(
+                          // ,
+                          //   color: Constant.textOrange,
+                          //   size: 14,
+                          // ),
+                          Iconify(
+                            Heroicons.chat_bubble_bottom_center_text_solid,
+                            color: Constant.textOrange,
+                            size: 14,
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 8),
+                          ),
+
+                          Flexible(
+                            child: Text(
+                              data.reasonDescription ?? '',
+                              style: Constant.titleH2_400_14(context: context)
+                                  .copyWith(color: Constant.textDarkGrey),
+                            ),
+                          ),
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 20),
+                      ),
+                      Row(
+                        children: List.generate(
+                            1000 ~/ 10,
+                            (index) => Expanded(
+                                  child: Container(
+                                    color: index % 2 == 0
+                                        ? Colors.transparent
+                                        : Constant.textLightGrey
+                                            .withOpacity(0.24),
+                                    height: 1,
+                                  ),
+                                )),
+                      ),
+                      if (data.statusID != "1" && data.statusID != "2")
+                        SizedBox(
+                          height:
+                              Constant.getActualYPhone(context: context, y: 20),
+                        ),
+                      if (data.statusID != "1" && data.statusID != "2")
+                        Row(
+                          children: [
+                            Expanded(
+                              child: CustomButtonWhite(
+                                  btnText: "Reject",
+                                  onPressed: () {
+                                    ApprovalDialogConfirmation(
+                                        context: context,
+                                        confirmFunc: () {},
+                                        textInformation: "Menolak ",
+                                        staffName: data.name ?? "",
+                                        typename: data.typename ?? "");
+                                  }),
+                            ),
+                            SizedBox(
+                              width: Constant.getActualXPhone(
+                                  context: context, x: 24),
+                            ),
+                            Expanded(
+                              child: CustomButtonOrange(
+                                  btnText: "Approve",
+                                  onPressed: () {
+                                    ApprovalDialogConfirmation(
+                                        context: context,
+                                        confirmFunc: () {},
+                                        textInformation: "Menyetujui ",
+                                        staffName: data.name ?? "",
+                                        typename: data.typename ?? "");
+                                  }),
+                            ),
+                          ],
+                        ),
+                    ],
+                  ),
+                ),
+                AprrovalCardStatusWidget(
+                  statusID: data.statusID ?? "",
+                  statusName: data.statusName ?? '',
+                )
+              ],
+            )),
+      ),
+    );
+  }
+}

lib/screen/approval/widget/approval_card_presensi.dart

@@ -0,0 +1,203 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/model/approval_model.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_card_status_widget.dart';
+import 'package:eva_icons_flutter/eva_icons_flutter.dart';
+import 'package:flutter/material.dart';
+
+class ApprovalCardPresensi extends StatelessWidget {
+  const ApprovalCardPresensi(
+      {super.key, required this.data, required this.onTap});
+  final ApprovalModel data;
+  final Function onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(
+          bottom: Constant.getActualYPhone(context: context, y: 20)),
+      child: InkWell(
+        customBorder: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+        ),
+        splashColor: Constant.bgOrange,
+        // hoverColor: Colors.red,
+        overlayColor: MaterialStatePropertyAll(Constant.bgOrange),
+
+        onTap: () {
+          onTap(data.typeID);
+        },
+        child: Ink(
+            decoration: BoxDecoration(boxShadow: [
+              BoxShadow(
+                color: Colors.grey.withOpacity(0.12),
+                offset: Offset(0.0, 10), //(x,y)
+                blurRadius: 4.0,
+              ),
+              BoxShadow(
+                color: Colors.grey.withOpacity(0.2),
+                offset: Offset(0.0, 0), //(x,y)
+                blurRadius: 2.0,
+              ),
+            ], color: Colors.white, borderRadius: BorderRadius.circular(16)),
+            child: Column(
+              children: [
+                Container(
+                  padding: EdgeInsets.symmetric(
+                      horizontal:
+                          Constant.getActualXPhone(context: context, x: 20),
+                      vertical:
+                          Constant.getActualYPhone(context: context, y: 16)),
+                  child: Column(
+                    children: [
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Text(
+                            data.name ?? "",
+                            style: Constant.body_16(context: context),
+                          ),
+                          Container(
+                            decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(8),
+                                color: Constant.bgBlue),
+                            padding: EdgeInsets.symmetric(
+                                horizontal: Constant.getActualXPhone(
+                                    context: context, x: 8),
+                                vertical: Constant.getActualYPhone(
+                                    context: context, y: 1)),
+                            child: Text(
+                              data.typename ?? "",
+                              style: Constant.body_12(context: context)
+                                  .copyWith(color: Constant.primaryBlue),
+                            ),
+                          )
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 8),
+                      ),
+                      Row(
+                        children: [
+                          Row(
+                            children: [
+                              Icon(
+                                EvaIcons.calendar,
+                                color: Constant.primaryOrange,
+                                size: 14,
+                              ),
+                              SizedBox(
+                                width: Constant.getActualXPhone(
+                                    context: context, x: 8),
+                              ),
+                              Text(
+                                data.date ?? "",
+                                style: Constant.titleH2_400_14(context: context)
+                                    .copyWith(color: Constant.textDarkGrey),
+                              )
+                            ],
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 20),
+                          ),
+                          Row(
+                            children: [
+                              Icon(
+                                EvaIcons.clock,
+                                color: Constant.primaryOrange,
+                                size: 14,
+                              ),
+                              SizedBox(
+                                width: Constant.getActualXPhone(
+                                    context: context, x: 8),
+                              ),
+                              Text(
+                                data.time ?? "",
+                                style: Constant.titleH2_400_14(context: context)
+                                    .copyWith(color: Constant.textDarkGrey),
+                              )
+                            ],
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 20),
+                          ),
+                          Row(
+                            children: [
+                              Image.asset(
+                                'images/finger_tap_orange_botnav.png',
+                                width: Constant.getActualXPhone(
+                                    context: context, x: 14),
+                              ),
+                              SizedBox(
+                                width: Constant.getActualXPhone(
+                                    context: context, x: 8),
+                              ),
+                              Text(
+                                data.presensiTypeName ?? "",
+                                style: Constant.titleH2_400_14(context: context)
+                                    .copyWith(color: Constant.textDarkGrey),
+                              )
+                            ],
+                          ),
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 8),
+                      ),
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Icon(
+                            EvaIcons.pin,
+                            color: Constant.primaryOrange,
+                            size: 14,
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 8),
+                          ),
+                          Flexible(
+                            child: Text(
+                              data.address ?? "",
+                              style: Constant.titleH2_400_14(context: context)
+                                  .copyWith(color: Constant.textDarkGrey),
+                            ),
+                          )
+                        ],
+                      ),
+                      if (data.statusID == "1" || data.statusID == "2")
+                        SizedBox(
+                          height:
+                              Constant.getActualYPhone(context: context, y: 20),
+                        ),
+                      if (data.statusID == "1" || data.statusID == "2")
+                        Row(
+                          children: List.generate(
+                              1000 ~/ 10,
+                              (index) => Expanded(
+                                    child: Container(
+                                      color: index % 2 == 0
+                                          ? Colors.transparent
+                                          : Constant.textLightGrey
+                                              .withOpacity(0.24),
+                                      height: 1,
+                                    ),
+                                  )),
+                        ),
+                    ],
+                  ),
+                ),
+                AprrovalCardStatusWidget(
+                  statusID: data.statusID ?? "",
+                  statusName: data.statusName ?? "",
+                )
+              ],
+            )),
+      ),
+    );
+  }
+}

lib/screen/approval/widget/approval_card_status_widget.dart

@@ -0,0 +1,52 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:flutter/material.dart';
+
+class AprrovalCardStatusWidget extends StatelessWidget {
+  const AprrovalCardStatusWidget(
+      {super.key, required this.statusID, required this.statusName});
+  final String statusID;
+  final String statusName;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (statusID) {
+      case "1":
+        return Container(
+          decoration: BoxDecoration(
+              color: Constant.bgGreen,
+              borderRadius: BorderRadius.only(
+                  bottomLeft: Radius.circular(16),
+                  bottomRight: Radius.circular(16))),
+          padding: EdgeInsets.symmetric(
+              horizontal: Constant.getActualXPhone(context: context, x: 20),
+              vertical: Constant.getActualYPhone(context: context, y: 16)),
+          width: MediaQuery.of(context).size.width,
+          child: Text(
+            statusName,
+            style: Constant.body_12(context: context)
+                .copyWith(color: Constant.primaryGreen),
+          ),
+        );
+      case "2":
+        return Container(
+          decoration: BoxDecoration(
+              color: Constant.bgRed,
+              borderRadius: BorderRadius.only(
+                  bottomLeft: Radius.circular(16),
+                  bottomRight: Radius.circular(16))),
+          padding: EdgeInsets.symmetric(
+              horizontal: Constant.getActualXPhone(context: context, x: 20),
+              vertical: Constant.getActualYPhone(context: context, y: 16)),
+          width: MediaQuery.of(context).size.width,
+          child: Text(
+            statusName,
+            style: Constant.body_12(context: context)
+                .copyWith(color: Constant.primaryRed),
+          ),
+        );
+
+      default:
+        return Container();
+    }
+  }
+}

lib/screen/approval/widget/approval_dialog_confirmation.dart

@@ -0,0 +1,75 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/widget/custom_button_approval.dart';
+import 'package:flutter/material.dart';
+
+Future ApprovalDialogConfirmation(
+    {required BuildContext context,
+    required String typename,
+    required String textInformation,
+    required String staffName,
+    required Function() confirmFunc}) {
+  return showDialog(
+    context: context,
+    builder: (BuildContext context) => Container(
+      decoration: BoxDecoration(
+          gradient: LinearGradient(
+              begin: Alignment.centerRight,
+              end: Alignment.centerLeft,
+              colors: [
+            Color(0xff161C24).withOpacity(0.91),
+            Color(0xff161C24).withOpacity(0.3)
+          ])),
+      child: AlertDialog(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.white,
+        shadowColor: Colors.white,
+        title: Text(
+          'Konfirmasi',
+          style: Constant.titleH1_700_18(context: context),
+        ),
+        content: Text.rich(TextSpan(
+            text: "Apakah anda yakin untuk ",
+            style: Constant.body_16(context: context)
+                .copyWith(fontWeight: FontWeight.w400),
+            children: [
+              TextSpan(
+                  text: textInformation,
+                  style: Constant.body_16(context: context)),
+              TextSpan(
+                  text: "${typename} ",
+                  style: Constant.body_16(context: context)
+                      .copyWith(fontWeight: FontWeight.w400)),
+              TextSpan(
+                  text: "${staffName} ?",
+                  style: Constant.body_16(context: context))
+            ])),
+        actions: <Widget>[
+          Column(
+            children: [
+              Container(
+                width: MediaQuery.of(context).size.width,
+                child: CustomButtonOrange(
+                  btnText: "Yakin",
+                  onPressed: confirmFunc,
+                ),
+              ),
+              SizedBox(
+                height: 3,
+              ),
+              Container(
+                width: MediaQuery.of(context).size.width,
+                child: CustomButtonWhite(
+                  btnText: "Batal",
+                  onPressed: () {
+                    Navigator.pop(context);
+                  },
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    ),
+  );
+}

lib/screen/approval/widget/approval_filter_chip_widget.dart

@@ -0,0 +1,71 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/model/approval_type_model.dart';
+import 'package:absensi_sas/provider/approval_filter_provider.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class ApprovalFilterChipWidget extends HookConsumerWidget {
+  const ApprovalFilterChipWidget({
+    super.key,
+    required this.data,
+  });
+  final ApprovalTypeModel data;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currentApprovalFilter = ref.watch(approvalFilterProvider);
+    handleOnTap(String value) {
+      var tmp = currentApprovalFilter.selectedApprovalType.toList();
+      var cek = tmp.contains(value);
+      if (cek) {
+        tmp.remove(value);
+      } else {
+        tmp.add(value);
+      }
+      ref.read(approvalFilterProvider.notifier).state = ApprovalFilterProvider(
+          endDate: currentApprovalFilter.endDate,
+          keyword: currentApprovalFilter.keyword,
+          selectedApprovalType: tmp,
+          startDate: currentApprovalFilter.startDate);
+    }
+
+    return Container(
+      margin: EdgeInsets.only(
+          right: Constant.getActualXPhone(context: context, x: 16)),
+      child: ElevatedButton(
+        onPressed: () {
+          handleOnTap(data.value!);
+        },
+        style: ButtonStyle(
+            elevation: MaterialStatePropertyAll(0),
+            shape: MaterialStatePropertyAll(RoundedRectangleBorder(
+                side: BorderSide(
+                  color: currentApprovalFilter.selectedApprovalType
+                          .contains(data.value)
+                      ? Constant.textOrange
+                      : Colors.grey.shade300,
+                ),
+                borderRadius: BorderRadius.circular(16))),
+            backgroundColor: MaterialStateProperty.resolveWith((states) {
+              if (currentApprovalFilter.selectedApprovalType
+                      .contains(data.value) ==
+                  true) {
+                return Constant.textOrange.withOpacity(0.1);
+              }
+              return Colors.white;
+            }),
+            overlayColor:
+                MaterialStatePropertyAll(Constant.textOrange.withOpacity(0.48)),
+            foregroundColor: MaterialStatePropertyAll(Colors.white),
+            shadowColor: MaterialStatePropertyAll(Colors.white),
+            surfaceTintColor: MaterialStatePropertyAll(Colors.white)),
+        child: Text(data.name ?? "",
+            style: Constant.subtitle_600_14(context: context).copyWith(
+                color: currentApprovalFilter.selectedApprovalType
+                        .contains(data.value)
+                    ? Constant.textOrange
+                    : Colors.black)),
+      ),
+    );
+  }
+}

lib/screen/approval/widget/approval_filter_widget.dart

@@ -0,0 +1,69 @@
+import 'package:absensi_sas/app/constant.dart';
+
+import 'package:absensi_sas/screen/approval/widget/filter_bottom_sheet.dart';
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
+import 'package:flutter/material.dart';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class ApprovalFilterWidget extends HookConsumerWidget {
+  const ApprovalFilterWidget({super.key});
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Container(
+      margin: EdgeInsets.only(
+          right: Constant.getActualXPhone(context: context, x: 16)),
+      child: ElevatedButton(
+        onPressed: () {
+          showModalBottomSheet(
+            backgroundColor: Colors.white,
+            shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(32),
+                    topRight: Radius.circular(32))),
+            context: context,
+            isScrollControlled: true,
+            enableDrag: true,
+            useSafeArea: true,
+            // useRootNavigator: true,
+            builder: (context) {
+              return FilterBottomSheet();
+            },
+          );
+        },
+        style: ButtonStyle(
+            elevation: MaterialStatePropertyAll(0),
+            shape: MaterialStatePropertyAll(RoundedRectangleBorder(
+                side: BorderSide(
+                  color: Colors.grey.shade300,
+                ),
+                borderRadius: BorderRadius.circular(16))),
+            backgroundColor: MaterialStateProperty.resolveWith((states) {
+              return Colors.white;
+            }),
+            overlayColor:
+                MaterialStatePropertyAll(Constant.textOrange.withOpacity(0.48)),
+            foregroundColor: MaterialStatePropertyAll(Colors.white),
+            shadowColor: MaterialStatePropertyAll(Colors.white),
+            surfaceTintColor: MaterialStatePropertyAll(Colors.white)),
+        child: Row(
+          children: [
+            Icon(
+              FluentIcons.options_24_filled,
+              size: 20,
+              color: Colors.black,
+            ),
+            SizedBox(
+              width: 8,
+            ),
+            Text(
+              "Filter",
+              style: Constant.subtitle_600_14(context: context)
+                  .copyWith(color: Colors.black),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/screen/approval/widget/filter_bottom_sheet.dart

@@ -0,0 +1,534 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/model/approval_type_model.dart';
+import 'package:absensi_sas/provider/approval_filter_provider.dart';
+import 'package:absensi_sas/widget/custom_button_approval.dart';
+import 'package:eva_icons_flutter/eva_icons_flutter.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:intl/intl.dart';
+
+class FilterBottomSheet extends HookConsumerWidget {
+  const FilterBottomSheet({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currApprovalTypeState = ref.read(approvalFilterProvider);
+    final approvalTypeList = [
+      ApprovalTypeModel(id: "1", name: "Presensi", isActive: false, value: "p"),
+      ApprovalTypeModel(id: "2", name: "Cuti", isActive: true, value: "c"),
+      ApprovalTypeModel(id: "3", name: "Lembur", isActive: false, value: "l"),
+    ];
+    final staffFocuseNode = useFocusNode();
+    final startDateFocusNode = useFocusNode();
+    final endDateFocusNode = useFocusNode();
+    final staffCtr =
+        useTextEditingController(text: currApprovalTypeState.keyword);
+    final startDateCtr = useTextEditingController(
+        text: DateFormat('dd-MM-yyyy').format(currApprovalTypeState.startDate));
+    final startDateState = useState(currApprovalTypeState.startDate);
+    final endDateCtr = useTextEditingController(
+        text: DateFormat('dd-MM-yyyy').format(currApprovalTypeState.endDate));
+    final endDateState = useState(currApprovalTypeState.endDate);
+    final dateKey = useState(0);
+
+    final selectedApprovalTypeState = useState<List<String>>(
+        currApprovalTypeState.selectedApprovalType.toList());
+    final checkboxKey = useState(1000);
+
+    selectApprovalTypeFunction(String value) {
+      var tmp = selectedApprovalTypeState.value;
+      var cek = tmp.contains(value);
+      if (cek) {
+        tmp.remove(value);
+      } else {
+        tmp.add(value);
+      }
+      selectedApprovalTypeState.value = tmp;
+      checkboxKey.value = checkboxKey.value + 1;
+    }
+
+    return Container(
+      padding: EdgeInsets.only(
+          bottom: MediaQuery.of(context).viewInsets.bottom * 0.75),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.only(
+              topLeft: Radius.circular(32), topRight: Radius.circular(32))),
+      child: SingleChildScrollView(
+        child: Container(
+          margin: EdgeInsets.symmetric(
+              horizontal: Constant.getActualXPhone(context: context, x: 24)),
+          height: MediaQuery.of(context).size.height * 0.75,
+          child: Column(
+            children: [
+              Container(
+                height: MediaQuery.of(context).size.height * 0.1,
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    Text(
+                      "Filter",
+                      style: Constant.titleH1_700(context: context),
+                    ),
+                    IconButton(
+                        onPressed: () {
+                          Navigator.pop(context);
+                        },
+                        icon: Icon(Icons.close))
+                  ],
+                ),
+              ),
+              Container(
+                height: MediaQuery.of(context).size.height * 0.55,
+                // color: Colors.green,
+
+                child: SingleChildScrollView(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        "Staff",
+                        style: Constant.titleH1_700_18(context: context)
+                            .copyWith(fontWeight: FontWeight.w700),
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 16),
+                      ),
+                      TextFormField(
+                        controller: staffCtr,
+                        focusNode: staffFocuseNode,
+                        style: Constant.titleH1_500_18(context: context),
+                        decoration: InputDecoration(
+                            focusColor: Constant.textOrange,
+                            // hoverColor: Constant.textOrange,
+                            suffixIcon: Icon(
+                              EvaIcons.searchOutline,
+                              color: staffFocuseNode.hasFocus
+                                  ? Constant.textOrange
+                                  : Color(0xff212B36),
+                            ),
+                            label: Text(
+                              "Cari Staff",
+                              style: Constant.titleH1_500_18(context: context)
+                                  .copyWith(
+                                      color: staffFocuseNode.hasFocus
+                                          ? Constant.textOrange
+                                          : Colors.grey.shade400),
+                            ),
+                            hintText: "Cari Staff",
+                            isDense: false,
+                            contentPadding: EdgeInsets.symmetric(
+                                vertical: Constant.getActualYPhone(
+                                    context: context, y: 16),
+                                horizontal: Constant.getActualXPhone(
+                                    context: context, x: 14)),
+                            hintStyle:
+                                Constant.titleH1_500_18(context: context),
+                            focusedBorder: OutlineInputBorder(
+                                borderSide:
+                                    BorderSide(color: Constant.textOrange),
+                                borderRadius: BorderRadius.circular(8)),
+                            enabledBorder: OutlineInputBorder(
+                                borderSide: BorderSide(
+                                    color: Colors.grey.shade500, width: 1),
+                                borderRadius: BorderRadius.circular(8)),
+                            border: OutlineInputBorder(
+                                borderSide:
+                                    BorderSide(color: Colors.grey.shade500),
+                                borderRadius: BorderRadius.circular(8))),
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 20),
+                      ),
+                      Row(
+                        children: [
+                          Expanded(
+                            child: Text(
+                              "Tanggal Awal",
+                              style: Constant.titleH1_700_18(context: context)
+                                  .copyWith(fontWeight: FontWeight.w700),
+                            ),
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 20),
+                          ),
+                          Expanded(
+                            child: Text(
+                              "Tanggal Akhir",
+                              style: Constant.titleH1_700_18(context: context)
+                                  .copyWith(fontWeight: FontWeight.w700),
+                            ),
+                          )
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 20),
+                      ),
+                      Row(
+                        children: [
+                          Expanded(
+                            child: TextFormField(
+                              key: ValueKey(dateKey.value),
+                              controller: startDateCtr,
+                              focusNode: startDateFocusNode,
+                              readOnly: true,
+                              style: Constant.titleH1_500_18(context: context),
+                              decoration: InputDecoration(
+                                  focusColor: Constant.textOrange,
+                                  // hoverColor: Constant.textOrange,
+                                  suffixIcon: Icon(
+                                    EvaIcons.calendar,
+                                    color: startDateFocusNode.hasFocus
+                                        ? Constant.textOrange
+                                        : Color(0xff212B36),
+                                  ),
+                                  label: Text(
+                                    "Tanggal Awal",
+                                    style: Constant.titleH1_500_18(
+                                            context: context)
+                                        .copyWith(
+                                            overflow: TextOverflow.ellipsis,
+                                            color: startDateFocusNode.hasFocus
+                                                ? Constant.textOrange
+                                                : Colors.grey.shade400),
+                                  ),
+                                  hintText: "Tanggal Awal",
+                                  isDense: false,
+                                  contentPadding: EdgeInsets.symmetric(
+                                      vertical: Constant.getActualYPhone(
+                                          context: context, y: 16),
+                                      horizontal: Constant.getActualXPhone(
+                                          context: context, x: 14)),
+                                  hintStyle:
+                                      Constant.titleH1_500_18(context: context)
+                                          .copyWith(
+                                              overflow: TextOverflow.ellipsis),
+                                  focusedBorder: OutlineInputBorder(
+                                      borderSide: BorderSide(
+                                          color: Constant.textOrange),
+                                      borderRadius: BorderRadius.circular(8)),
+                                  enabledBorder: OutlineInputBorder(
+                                      borderSide: BorderSide(
+                                          color: Colors.grey.shade500,
+                                          width: 1),
+                                      borderRadius: BorderRadius.circular(8)),
+                                  border: OutlineInputBorder(
+                                      borderSide: BorderSide(
+                                          color: Colors.grey.shade500),
+                                      borderRadius: BorderRadius.circular(8))),
+                              onTap: () async {
+                                startDateFocusNode.requestFocus();
+                                dateKey.value = dateKey.value + 1;
+                                DateTime? pickedDate = await showDatePicker(
+                                    helpText: "Tanggal Awal",
+                                    // locale: Locale('id', 'ID'),
+                                    builder: (context, child) {
+                                      return Theme(
+                                          data: ThemeData().copyWith(
+                                              datePickerTheme:
+                                                  DatePickerThemeData(
+                                                      dayBackgroundColor:
+                                                          MaterialStateProperty
+                                                              .resolveWith(
+                                                                  (states) {
+                                                        if (states.contains(
+                                                            MaterialState
+                                                                .selected)) {
+                                                          return Constant
+                                                              .textOrange;
+                                                        }
+                                                        return Colors.white;
+                                                      }),
+                                                      todayBackgroundColor:
+                                                          MaterialStateProperty
+                                                              .resolveWith(
+                                                                  (states) {
+                                                        if (states.contains(
+                                                            MaterialState
+                                                                .selected)) {
+                                                          return Constant
+                                                              .textOrange;
+                                                        }
+                                                        return Colors.white;
+                                                      }),
+                                                      todayBorder: BorderSide(
+                                                          style:
+                                                              BorderStyle.solid,
+                                                          color: Constant
+                                                              .textOrange,
+                                                          width: 1),
+                                                      headerBackgroundColor:
+                                                          Constant.textOrange,
+                                                      headerForegroundColor:
+                                                          Colors.white,
+                                                      surfaceTintColor:
+                                                          Colors.white,
+                                                      backgroundColor:
+                                                          Colors.white),
+                                              primaryColor: Constant.textOrange,
+                                              primaryColorDark:
+                                                  Constant.textOrange,
+                                              primaryColorLight:
+                                                  Constant.textOrange),
+                                          child: child!);
+                                    },
+                                    confirmText: "OK",
+                                    cancelText: "Batal",
+                                    context: context,
+                                    initialDate: startDateState.value,
+                                    firstDate: DateTime(1950),
+                                    initialEntryMode:
+                                        DatePickerEntryMode.calendarOnly,
+                                    lastDate: DateTime(2100));
+
+                                if (pickedDate != null) {
+                                  print(
+                                      pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000
+                                  String formattedDate =
+                                      DateFormat('dd-MM-yyyy')
+                                          .format(pickedDate);
+                                  print(
+                                      formattedDate); //formatted date output using intl package =>  2021-03-16
+                                  startDateCtr.text =
+                                      formattedDate; //set output date to TextField value.
+                                  startDateState.value = pickedDate;
+                                  startDateFocusNode.requestFocus();
+                                } else {}
+                              },
+                            ),
+                          ),
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 20),
+                          ),
+                          Expanded(
+                            child: TextFormField(
+                              key: ValueKey(dateKey.value),
+                              controller: endDateCtr,
+                              focusNode: endDateFocusNode,
+                              readOnly: true,
+                              style: Constant.titleH1_500_18(context: context),
+                              decoration: InputDecoration(
+                                  focusColor: Constant.textOrange,
+                                  // hoverColor: Constant.textOrange,
+                                  suffixIcon: Icon(
+                                    EvaIcons.calendar,
+                                    color: endDateFocusNode.hasFocus
+                                        ? Constant.textOrange
+                                        : Color(0xff212B36),
+                                  ),
+                                  label: Text(
+                                    "Tanggal Akhir",
+                                    style: Constant.titleH1_500_18(
+                                            context: context)
+                                        .copyWith(
+                                            overflow: TextOverflow.ellipsis,
+                                            color: endDateFocusNode.hasFocus
+                                                ? Constant.textOrange
+                                                : Colors.grey.shade400),
+                                  ),
+                                  hintText: "Tanggal Akhir",
+                                  isDense: false,
+                                  contentPadding: EdgeInsets.symmetric(
+                                      vertical: Constant.getActualYPhone(
+                                          context: context, y: 16),
+                                      horizontal: Constant.getActualXPhone(
+                                          context: context, x: 14)),
+                                  hintStyle:
+                                      Constant.titleH1_500_18(context: context)
+                                          .copyWith(
+                                              overflow: TextOverflow.ellipsis),
+                                  focusedBorder: OutlineInputBorder(
+                                      borderSide: BorderSide(
+                                          color: Constant.textOrange),
+                                      borderRadius: BorderRadius.circular(8)),
+                                  enabledBorder: OutlineInputBorder(
+                                      borderSide: BorderSide(
+                                          color: Colors.grey.shade500,
+                                          width: 1),
+                                      borderRadius: BorderRadius.circular(8)),
+                                  border: OutlineInputBorder(
+                                      borderSide: BorderSide(
+                                          color: Colors.grey.shade500),
+                                      borderRadius: BorderRadius.circular(8))),
+                              onTap: () async {
+                                endDateFocusNode.requestFocus();
+                                dateKey.value = dateKey.value + 1;
+                                DateTime? pickedDate = await showDatePicker(
+                                    helpText: "Tanggal Akhir",
+                                    // locale: Locale('id', 'ID'),
+                                    builder: (context, child) {
+                                      return Theme(
+                                          data: ThemeData().copyWith(
+                                              datePickerTheme:
+                                                  DatePickerThemeData(
+                                                      dayBackgroundColor:
+                                                          MaterialStateProperty
+                                                              .resolveWith(
+                                                                  (states) {
+                                                        if (states.contains(
+                                                            MaterialState
+                                                                .selected)) {
+                                                          return Constant
+                                                              .textOrange;
+                                                        }
+                                                        return Colors.white;
+                                                      }),
+                                                      todayBackgroundColor:
+                                                          MaterialStateProperty
+                                                              .resolveWith(
+                                                                  (states) {
+                                                        if (states.contains(
+                                                            MaterialState
+                                                                .selected)) {
+                                                          return Constant
+                                                              .textOrange;
+                                                        }
+                                                        return Colors.white;
+                                                      }),
+                                                      todayBorder: BorderSide(
+                                                          style:
+                                                              BorderStyle.solid,
+                                                          color: Constant
+                                                              .textOrange,
+                                                          width: 1),
+                                                      headerBackgroundColor:
+                                                          Constant.textOrange,
+                                                      headerForegroundColor:
+                                                          Colors.white,
+                                                      surfaceTintColor:
+                                                          Colors.white,
+                                                      backgroundColor:
+                                                          Colors.white),
+                                              primaryColor: Constant.textOrange,
+                                              primaryColorDark:
+                                                  Constant.textOrange,
+                                              primaryColorLight:
+                                                  Constant.textOrange),
+                                          child: child!);
+                                    },
+                                    confirmText: "OK",
+                                    cancelText: "Batal",
+                                    context: context,
+                                    initialDate: startDateState.value,
+                                    firstDate: DateTime(1950),
+                                    initialEntryMode:
+                                        DatePickerEntryMode.calendarOnly,
+                                    lastDate: DateTime(2100));
+
+                                if (pickedDate != null) {
+                                  print(
+                                      pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000
+                                  String formattedDate =
+                                      DateFormat('dd-MM-yyyy')
+                                          .format(pickedDate);
+                                  print(
+                                      formattedDate); //formatted date output using intl package =>  2021-03-16
+                                  endDateCtr.text =
+                                      formattedDate; //set output date to TextField value.
+                                  endDateState.value = pickedDate;
+                                  endDateFocusNode.requestFocus();
+                                } else {}
+                              },
+                            ),
+                          )
+                        ],
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 16),
+                      ),
+                      // Text(
+                      //   ref
+                      //       .watch(approvalFilterProvider)
+                      //       .selectedApprovalType
+                      //       .toString(),
+                      //   style: Constant.titleH1_700_18(context: context),
+                      // ),
+                      Text(
+                        "Approval",
+                        style: Constant.titleH1_700_18(context: context)
+                            .copyWith(fontWeight: FontWeight.w700),
+                      ),
+                      SizedBox(
+                        height:
+                            Constant.getActualYPhone(context: context, y: 16),
+                      ),
+                      ...approvalTypeList.map(
+                        (e) {
+                          return Row(
+                            children: [
+                              Checkbox(
+                                shape: RoundedRectangleBorder(
+                                    borderRadius: BorderRadius.circular(4)),
+                                value: selectedApprovalTypeState.value
+                                    .contains(e.value),
+                                onChanged: (val) {
+                                  selectApprovalTypeFunction(e.value!);
+                                },
+                              ),
+                              Text(
+                                e.name ?? "",
+                                style: Constant.titleH1_700_18(context: context)
+                                    .copyWith(fontWeight: FontWeight.normal),
+                              )
+                            ],
+                          );
+                        },
+                      )
+                    ],
+                  ),
+                ),
+              ),
+              Container(
+                height: MediaQuery.of(context).size.height * 0.1,
+                child: Row(
+                  children: [
+                    Expanded(
+                      child: CustomButtonWhite(
+                          btnText: "Reset",
+                          onPressed: () {
+                            ref.read(approvalFilterProvider.notifier).state =
+                                ApprovalFilterProvider(
+                                    startDate: DateTime.now(),
+                                    endDate: DateTime.now(),
+                                    keyword: "",
+                                    selectedApprovalType: []);
+                            Navigator.pop(context);
+                          }),
+                    ),
+                    SizedBox(
+                      width: Constant.getActualXPhone(context: context, x: 24),
+                    ),
+                    Expanded(
+                      child: CustomButtonOrange(
+                          btnText: "Simpan",
+                          onPressed: () {
+                            ref.read(approvalFilterProvider.notifier).state =
+                                ApprovalFilterProvider(
+                                    endDate: endDateState.value,
+                                    keyword: staffCtr.text,
+                                    selectedApprovalType:
+                                        selectedApprovalTypeState.value,
+                                    startDate: startDateState.value);
+                            Navigator.pop(context);
+                          }),
+                    ),
+                  ],
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screen/approval_detail/approval_detail_screen.dart

@@ -0,0 +1,368 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/model/approval_detail_model.dart';
+import 'package:absensi_sas/screen/approval/approval_mockup.dart';
+import 'package:absensi_sas/screen/approval/widget/approval_dialog_confirmation.dart';
+import 'package:absensi_sas/widget/custom_button_approval.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:latlong2/latlong.dart';
+
+class ApprovalDetailScreen extends HookConsumerWidget {
+  const ApprovalDetailScreen({super.key});
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final loading = useState(true);
+    final data = useState<ApprovalDetailModel>(
+        ApprovalDetailModel(imagePath: "", lat: 0, long: 0));
+    init() {
+      loading.value = true;
+      var randIdx = Random().nextInt(approvalDetailMockup.length);
+      var tmp = approvalDetailMockup[randIdx];
+      Timer(Duration(seconds: 2), () {
+        data.value = tmp;
+        loading.value = false;
+      });
+    }
+
+    useEffect(() {
+      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+        init();
+        return;
+      });
+      return () {};
+    }, []);
+    return SafeArea(
+        minimum: EdgeInsets.only(
+            top: Constant.getActualYPhone(context: context, y: 30)),
+        child: Scaffold(
+          backgroundColor: Constant.textWhite,
+          appBar: AppBar(
+            backgroundColor: Colors.white,
+            shadowColor: Colors.white,
+            surfaceTintColor: Colors.white,
+            scrolledUnderElevation: 0,
+            elevation: 0,
+            leading: Container(
+              child: IconButton(
+                  onPressed: () {
+                    Navigator.pop(context);
+                  },
+                  icon: Icon(Icons.arrow_back_ios_new_rounded)),
+            ),
+            centerTitle: true,
+            title: Text(
+              "Detail",
+              style: Constant.title_screen(context: context),
+            ),
+          ),
+          body: loading.value
+              ? Center(
+                  child: CircularProgressIndicator(),
+                )
+              : Container(
+                  color: Colors.white,
+                  padding: EdgeInsets.symmetric(
+                      horizontal:
+                          Constant.getActualXPhone(context: context, x: 20)),
+                  child: RefreshIndicator(
+                    onRefresh: () async {
+                      init();
+                    },
+                    child: SingleChildScrollView(
+                      child: Column(
+                        children: [
+                          SizedBox(
+                            height: Constant.getActualYPhone(
+                                context: context, y: 36),
+                          ),
+                          if (data.value.statusID == "1" ||
+                              data.value.statusID == "2")
+                            Row(
+                              children: [
+                                Spacer(),
+                                if (data.value.statusID == "1")
+                                  Container(
+                                    decoration: BoxDecoration(
+                                        borderRadius: BorderRadius.circular(8),
+                                        color: Constant.bgGreen),
+                                    padding: EdgeInsets.symmetric(
+                                        horizontal: Constant.getActualXPhone(
+                                            context: context, x: 8),
+                                        vertical: Constant.getActualYPhone(
+                                            context: context, y: 2)),
+                                    child: Text(
+                                      "Approve",
+                                      style: Constant.body_12(context: context)
+                                          .copyWith(
+                                              color: Constant.primaryGreen),
+                                    ),
+                                  ),
+                                if (data.value.statusID == "2")
+                                  Container(
+                                    decoration: BoxDecoration(
+                                        borderRadius: BorderRadius.circular(8),
+                                        color: Constant.bgRed),
+                                    padding: EdgeInsets.symmetric(
+                                        horizontal: Constant.getActualXPhone(
+                                            context: context, x: 8),
+                                        vertical: Constant.getActualYPhone(
+                                            context: context, y: 2)),
+                                    child: Text(
+                                      "Reject",
+                                      style: Constant.body_12(context: context)
+                                          .copyWith(color: Constant.primaryRed),
+                                    ),
+                                  )
+                              ],
+                            ),
+                          if (data.value.statusID == "1" ||
+                              data.value.statusID == "2")
+                            SizedBox(
+                              height: Constant.getActualYPhone(
+                                  context: context, y: 8),
+                            ),
+                          Container(
+                            margin: EdgeInsets.only(bottom: 8),
+                            child: Row(
+                              children: [
+                                Expanded(
+                                  flex: 4,
+                                  child: Text("Nama : ",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              color: Constant.textDarkGrey,
+                                              fontWeight: FontWeight.w400)),
+                                ),
+                                Expanded(
+                                  flex: 9,
+                                  child: Text(data.value.name ?? "",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              fontWeight: FontWeight.w400)),
+                                )
+                              ],
+                            ),
+                          ),
+                          Container(
+                            margin: EdgeInsets.only(bottom: 8),
+                            child: Row(
+                              children: [
+                                Expanded(
+                                  flex: 4,
+                                  child: Text("NIP : ",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              color: Constant.textDarkGrey,
+                                              fontWeight: FontWeight.w400)),
+                                ),
+                                Expanded(
+                                  flex: 9,
+                                  child: Text(data.value.nip ?? "",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              fontWeight: FontWeight.w400)),
+                                )
+                              ],
+                            ),
+                          ),
+                          Container(
+                            margin: EdgeInsets.only(bottom: 8),
+                            child: Row(
+                              children: [
+                                Expanded(
+                                  flex: 4,
+                                  child: Text("Tanggal : ",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              color: Constant.textDarkGrey,
+                                              fontWeight: FontWeight.w400)),
+                                ),
+                                Expanded(
+                                  flex: 9,
+                                  child: Text(data.value.date ?? "",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              fontWeight: FontWeight.w400)),
+                                )
+                              ],
+                            ),
+                          ),
+                          Container(
+                            margin: EdgeInsets.only(bottom: 8),
+                            child: Row(
+                              children: [
+                                Expanded(
+                                  flex: 4,
+                                  child: Text("Jam : ",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              color: Constant.textDarkGrey,
+                                              fontWeight: FontWeight.w400)),
+                                ),
+                                Expanded(
+                                  flex: 9,
+                                  child: Text(data.value.time ?? "",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              fontWeight: FontWeight.w400)),
+                                )
+                              ],
+                            ),
+                          ),
+                          Container(
+                            margin: EdgeInsets.only(bottom: 8),
+                            child: Row(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Expanded(
+                                  flex: 4,
+                                  child: Text("Alamat : ",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              color: Constant.textDarkGrey,
+                                              fontWeight: FontWeight.w400)),
+                                ),
+                                Expanded(
+                                  flex: 9,
+                                  child: Text(data.value.address ?? "",
+                                      style: Constant.body_16(context: context)
+                                          .copyWith(
+                                              fontWeight: FontWeight.w400)),
+                                )
+                              ],
+                            ),
+                          ),
+                          Container(
+                            margin: EdgeInsets.only(top: 16),
+                            width: MediaQuery.of(context).size.width,
+                            height: Constant.getActualYPhone(
+                                context: context, y: 400),
+                            child: FlutterMap(
+                                options: MapOptions(
+                                  center: LatLng(data.value.lat ?? 0,
+                                      data.value.long ?? 0),
+                                  zoom: 16,
+                                ),
+                                children: [
+                                  TileLayer(
+                                    urlTemplate:
+                                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                                    userAgentPackageName: 'com.example.app',
+                                  ),
+                                  MarkerLayer(
+                                    markers: [
+                                      Marker(
+                                        point: LatLng(-7.539538, 110.798357),
+                                        child: const Icon(
+                                          Icons.location_on,
+                                          color: Colors.red,
+                                          size: 50,
+                                        ),
+                                      )
+                                      // Marker(
+                                      //     point: LatLng(lat, long),
+                                      //     width: 100,
+                                      //     height: 100,
+                                      //     builder: (context) => const Icon(
+                                      //           Icons.location_on,
+                                      //           color: Colors.red,
+                                      //           size: 50,
+                                      //         )),
+                                    ],
+                                  ),
+                                ]),
+                          ),
+                          if (data.value.imagePath != "" &&
+                              data.value.imagePath != null)
+                            Container(
+                              margin: EdgeInsets.only(top: 16, bottom: 48),
+                              child: Image.network(
+                                data.value.imagePath!,
+                                errorBuilder: (context, error, stackTrace) {
+                                  return Text(
+                                    "Error load image : ${error.toString()}",
+                                    style: Constant.body_12(context: context)
+                                        .copyWith(color: Constant.primaryRed),
+                                  );
+                                },
+                                loadingBuilder:
+                                    (context, child, loadingProgress) {
+                                  if (loadingProgress == null) return child;
+                                  return Container(
+                                      child: Column(
+                                    children: [
+                                      Text(loadingProgress.expectedTotalBytes !=
+                                              null
+                                          ? ((loadingProgress.cumulativeBytesLoaded /
+                                                          loadingProgress
+                                                              .expectedTotalBytes!) *
+                                                      100)
+                                                  .round()
+                                                  .toString() +
+                                              " %"
+                                          : ""),
+                                      LinearProgressIndicator(
+                                        value: loadingProgress
+                                                    .expectedTotalBytes !=
+                                                null
+                                            ? loadingProgress
+                                                    .cumulativeBytesLoaded /
+                                                loadingProgress
+                                                    .expectedTotalBytes!
+                                            : null,
+                                      ),
+                                    ],
+                                  ));
+                                },
+                              ),
+                            ),
+                          if (data.value.statusID != "1" &&
+                              data.value.statusID != "2")
+                            Container(
+                              margin: EdgeInsets.symmetric(vertical: 24),
+                              child: Row(
+                                children: [
+                                  Expanded(
+                                    child: CustomButtonWhite(
+                                        btnText: "Reject",
+                                        onPressed: () {
+                                          ApprovalDialogConfirmation(
+                                              context: context,
+                                              typename: "presensi ",
+                                              textInformation: "menolak ",
+                                              staffName: data.value.name ?? "",
+                                              confirmFunc: () {});
+                                        }),
+                                  ),
+                                  SizedBox(
+                                    width: Constant.getActualXPhone(
+                                        context: context, x: 24),
+                                  ),
+                                  Expanded(
+                                    child: CustomButtonOrange(
+                                        btnText: "Approve",
+                                        onPressed: () {
+                                          ApprovalDialogConfirmation(
+                                              context: context,
+                                              typename: "presensi ",
+                                              textInformation: "menyetujui ",
+                                              staffName: data.value.name ?? "",
+                                              confirmFunc: () {});
+                                        }),
+                                  ),
+                                ],
+                              ),
+                            )
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+        ));
+  }
+}

lib/screen/home/googleapis_provider.dart

@@ -0,0 +1,75 @@
+
+import 'package:absensi_sas/repository/googleapis_repository.dart';
+
+import 'package:equatable/equatable.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../provider/dio_provider.dart';
+import '../../provider/graphql_provider.dart';
+import '../../repository/base_repository.dart';
+
+abstract class GoogleApisProviderState extends Equatable {
+  final DateTime date;
+  const GoogleApisProviderState(this.date);
+  @override
+  List<Object?> get props => [date];
+}
+
+class GoogleApisProviderStateInit extends GoogleApisProviderState {
+  GoogleApisProviderStateInit() : super(DateTime.now());
+}
+
+class GoogleApisProviderStateLoading extends GoogleApisProviderState {
+  GoogleApisProviderStateLoading() : super(DateTime.now());
+}
+
+class GoogleApisProviderStateError extends GoogleApisProviderState {
+  final String message;
+  GoogleApisProviderStateError({
+    required this.message,
+  }) : super(DateTime.now());
+}
+
+class GoogleApisProviderStateDone extends GoogleApisProviderState {
+  final String model;
+  GoogleApisProviderStateDone({
+    required this.model,
+  }) : super(DateTime.now());
+}
+
+//notifier
+class GoogleApisProviderNotifier extends StateNotifier<GoogleApisProviderState> {
+  final Ref ref;
+  GoogleApisProviderNotifier({
+    required this.ref,
+  }) : super(GoogleApisProviderStateInit());
+
+  void googleApisProvider(
+    String latitude,
+    String longitude,
+  ) async {
+    try {
+      state = GoogleApisProviderStateLoading();
+      final graphql = ref.read(graphqlProvider(''));
+      final dio = ref.read(dioProvider);
+      final resp = await GoogleApisRepository(graphql: graphql, dio: dio)
+          .getAddressFromCoordinates(
+          latitude,
+          longitude
+      );
+      state = GoogleApisProviderStateDone(model: resp);
+    } catch (e) {
+      if (e is BaseRepositoryException) {
+        print(e.message);
+        state = GoogleApisProviderStateError(message: e.message ?? "");
+      } else {
+        state = GoogleApisProviderStateError(message: e.toString());
+      }
+    }
+  }
+}
+
+// provider
+final googleApisProviderProvider =
+    StateNotifierProvider<GoogleApisProviderNotifier, GoogleApisProviderState>(
+  (ref) => GoogleApisProviderNotifier(ref: ref),
+);

lib/screen/home/home_screen_v1.dart

@@ -0,0 +1,860 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+// import 'package:geocoding/geocoding.dart';
+import 'package:geolocator/geolocator.dart';
+import 'package:google_sign_in/google_sign_in.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:permission_handler/permission_handler.dart';
+
+import '../../app/route.dart';
+import '../../provider/current_check_distance_provider.dart';
+import '../../provider/current_check_jam_presensi_provider.dart';
+import '../../provider/current_menu_provider.dart';
+import '../../provider/current_user_provider.dart';
+import '../../provider/google_login_provider.dart';
+import '../../widget/custom_drawer.dart';
+import '../../widget/real_date.dart';
+import '../../widget/real_time.dart';
+import '../../widget/sankbar_widget.dart';
+import '../presensi/check_distance_provider.dart';
+import '../presensi/check_presensi_jam_provider.dart';
+
+class HomeScreenV1 extends HookConsumerWidget {
+  const HomeScreenV1({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedUser = ref.read(currentUserProvider);
+    final isLoadingProsesCheckDistance = useState<bool>(false);
+    final varCurrentDistanceProvider = ref.watch(currentCheckDistanceProvider);
+    final varCurrentCheckJamProvider =
+        ref.watch(currentCheckJamPresensiProvider);
+    final positionLatitude = useState<String>("");
+    final positionLongitude = useState<String>("");
+    // GoogleSignInAccount? currentUserGoogle =
+    //     ref.watch(currentUserGoogleProvider);
+
+    final googleSignIn = ref.watch(googleSignInProvider);
+
+    useEffect(() {
+      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+        final staffID = ref.read(currentUserProvider)?.model.staffId ?? "0";
+        if (staffID == "0") {
+          //not login
+          Navigator.of(context)
+              .pushNamedAndRemoveUntil(loginRoute, (route) => true);
+
+          //  Navigator.popAndPushNamed(context, loginRoute);
+          return;
+        }
+      });
+      return () {};
+    }, []);
+
+    useEffect(() {
+      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+        final staffID = ref.read(currentUserProvider)?.model.staffId ?? "0";
+
+        if (staffID != "0") {
+          // panggil check jam presensi provider
+          Map<String, dynamic> inpVariablesCheckPresensiJam = {
+            "M_StaffID": selectedUser?.model.staffId ?? "",
+            "M_CompanyID": selectedUser?.model.companyId ?? "",
+            "token": selectedUser?.token ?? "",
+          };
+
+          ref.read(checkPresensiJamProvider.notifier).checkPresensiJam(
+                selectedUser?.model.staffId ?? "",
+                selectedUser?.model.companyId ?? "",
+                selectedUser?.token ?? "",
+                inpVariablesCheckPresensiJam,
+              );
+        }
+      });
+      return () {};
+    }, []);
+
+    Future<void> getAddressFromLocation() async {
+      try {
+        isLoadingProsesCheckDistance.value = true;
+        // Mendapatkan posisi pengguna
+        LocationPermission permission = await Geolocator.requestPermission();
+
+        if (permission == LocationPermission.denied) {
+          isLoadingProsesCheckDistance.value = false;
+          SanckbarWidget(context, 'Izin lokasi ditolak', snackbarType.error);
+          // Handle jika pengguna menolak izin lokasi
+          print("Izin lokasi ditolak");
+          return;
+        }
+
+        // Position position = await Geolocator.getCurrentPosition(
+        //     desiredAccuracy: LocationAccuracy.high);
+
+        // // Mendapatkan alamat dari posisi
+        // List<Placemark> placemarks = await placemarkFromCoordinates(
+        //     position.latitude, position.longitude);
+
+        // if (placemarks.isNotEmpty) {
+        //   isLoadingProsesCheckDistance.value = false;
+        //   Placemark placemark = placemarks.first;
+        //   // String address =
+        //   //     "${placemark.thoroughfare}, ${placemark.locality}, ${placemark.administrativeArea}, ${placemark.country},";
+
+        //   String address =
+        //       "${placemark.street}, ${placemark.subLocality}, ${placemark.subAdministrativeArea}, ${placemark.postalCode}";
+        //   print("Alamat: $address");
+
+        //   positionLatitude.value = position.latitude.toString();
+        //   positionLongitude.value = position.longitude.toString();
+
+        //   // panggil check distance provider
+        //   ref.read(checkDistanceProvider.notifier).checkDistance(
+        //         selectedUser?.model.staffId ?? "",
+        //         selectedUser?.model.companyId ?? "",
+        //         positionLatitude.value,
+        //         positionLongitude.value,
+        //       );
+        // } else {
+        //   isLoadingProsesCheckDistance.value = false;
+        //   SanckbarWidget(
+        //       context, 'Tidak dapat menemukan alamat.', snackbarType.error);
+        //   print("Tidak dapat menemukan alamat.");
+        // }
+      } catch (e) {
+        print("Error: $e");
+        isLoadingProsesCheckDistance.value = false;
+        SanckbarWidget(context, 'Error : $e', snackbarType.error);
+      }
+    }
+
+    Future<void> requestLocationPermission() async {
+      var status = await Permission.location.request();
+      isLoadingProsesCheckDistance.value = true;
+      if (status.isGranted) {
+        // Izin diberikan, lanjutkan dengan mendapatkan lokasi
+        getAddressFromLocation();
+      } else {
+        isLoadingProsesCheckDistance.value = false;
+        // Izin ditolak, berikan pemberitahuan atau instruksi
+        // print('Izin lokasi ditolak');
+        SanckbarWidget(context, 'Izin Ditolak', snackbarType.error);
+      }
+    }
+
+    // check distance provider
+    ref.listen(checkDistanceProvider, (prev, next) {
+      if (next is CheckDistanceStateLoading) {
+        isLoadingProsesCheckDistance.value = true;
+      } else if (next is CheckDistanceStateError) {
+        isLoadingProsesCheckDistance.value = false;
+        SanckbarWidget(context, next.message, snackbarType.warning);
+      } else if (next is CheckDistanceStateDone) {
+        isLoadingProsesCheckDistance.value = false;
+
+        if (next.model.selfie == "TRUE") {
+          ref.read(currentPageProvider.notifier).update((state) => 99);
+          // Navigator.of(context).pop();
+          Navigator.of(context).restorablePushNamed(presensiSelfieRoute);
+        } else {
+          if (next.model.selfie == "FALSE") {
+            ref.read(currentPageProvider.notifier).update((state) => 99);
+            Navigator.of(context).restorablePushNamed(presensiRoute);
+          }
+        }
+      }
+    });
+
+    // check jam presensi
+    ref.listen(checkPresensiJamProvider, (prev, next) {
+      if (next is CheckPresensiJamStateLoading) {
+        isLoadingProsesCheckDistance.value = true;
+      } else if (next is CheckPresensiJamStateError) {
+        isLoadingProsesCheckDistance.value = false;
+        print("Error : " + next.toString());
+        SanckbarWidget(
+            context, "Error : " + next.toString(), snackbarType.warning);
+      } else if (next is CheckPresensiJamStateDone) {
+        isLoadingProsesCheckDistance.value = false;
+      }
+    });
+
+    return Scaffold(
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+      floatingActionButton: Container(
+        width: Constant.getActualXPhone(context: context, x: 100),
+        height: Constant.getActualYPhone(context: context, y: 100),
+        child: FittedBox(
+          child: (isLoadingProsesCheckDistance.value)
+              ? SizedBox(
+                  width: Constant.getActualXPhone(context: context, x: 50),
+                  height: Constant.getActualYPhone(context: context, y: 50),
+                  child: Center(
+                    child: CircularProgressIndicator(
+                      color: Constant.textOrange,
+                    ),
+                  ),
+                )
+              : FloatingActionButton(
+                  onPressed: () async {
+                    await requestLocationPermission();
+                  },
+                  backgroundColor: Color(0xFFFFFFFF),
+                  shape: CircleBorder(),
+                  child: Container(
+                    width: Constant.getActualXPhone(context: context, x: 50),
+                    height: Constant.getActualYPhone(context: context, y: 50),
+                    decoration: BoxDecoration(
+                      image: DecorationImage(
+                        image: AssetImage(
+                            'images/finger_tap_orange_botnav.png'), // Ganti dengan path gambar Anda
+                      ),
+                    ),
+                  ),
+                ),
+        ),
+      ),
+      bottomNavigationBar: Container(
+        width: Constant.getActualXPhone(context: context, x: 390),
+        height: Constant.getActualYPhone(context: context, y: 84),
+        decoration: BoxDecoration(
+          color: Color(0xFFFFFFFF),
+          boxShadow: [
+            BoxShadow(
+              offset: Offset(0, -1),
+              blurRadius: 8,
+              spreadRadius: -8,
+              color: Color.fromRGBO(0, 0, 0, 0.10),
+            ),
+          ],
+        ),
+        child: Row(
+          children: <Widget>[
+            Expanded(
+                child: Container(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: <Widget>[
+                  Image(
+                    image: AssetImage('images/home_orange.png'),
+                  ),
+                  Text(
+                    'Beranda',
+                    style: Constant.subtitle_500_12(context: context).copyWith(
+                      color: Constant.textOrange,
+                    ),
+                  )
+                ],
+              ),
+            )),
+            Expanded(
+                child: Container(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: <Widget>[
+                  Image(
+                    image: AssetImage('images/person_grey.png'),
+                  ),
+                  Text(
+                    'Profile',
+                    style: Constant.subtitle_500_12(context: context).copyWith(
+                      color: Constant.textLightGrey,
+                    ),
+                  )
+                ],
+              ),
+            )),
+          ],
+        ),
+      ),
+      body: SafeArea(
+        child: SingleChildScrollView(
+          child: Container(
+            width: Constant.getActualXPhone(context: context, x: 390),
+            // height: Constant.getActualYPhone(context: context, y: 844),
+            child: RefreshIndicator(
+              onRefresh: () async {},
+              child: Column(
+                children: [
+                  Padding(
+                    padding: EdgeInsets.only(
+                      top: Constant.getActualYPhone(context: context, y: 58),
+                      left: Constant.getActualXPhone(context: context, x: 33),
+                      right: Constant.getActualXPhone(context: context, x: 27),
+                    ),
+                    child: Container(
+                      child: (googleSignIn.currentUser == null)
+                          ? Center(
+                              child: CircularProgressIndicator(),
+                            )
+                          : ListTile(
+                              // leading: Container(
+                              //   width: Constant.getActualXPhone(
+                              //       context: context, x: 36),
+                              //   height: Constant.getActualYPhone(
+                              //       context: context, y: 36),
+                              //   child: Image(
+                              //     image: AssetImage('images/avatar_c.png'),
+                              //   ),
+                              // ),
+                              leading: GoogleUserCircleAvatar(
+                                identity: googleSignIn.currentUser!,
+                              ),
+                              title: Text(
+                                // "Stephen Kusumo",
+                                // selectedUser?.model.name ?? "",
+                                // currentUserGoogle.displayName ?? "",
+                                googleSignIn.currentUser?.displayName ?? "",
+                                overflow: TextOverflow.ellipsis,
+                                style: Constant.titleH1_700(context: context)
+                                  ..copyWith(
+                                    color: Constant.textBlack,
+                                  ),
+                              ),
+                              subtitle: Text(
+                                // "Step@example.com",
+                                // currentUserGoogle?.email ?? "",
+                                // selectedUser?.model.email ?? "",
+                                googleSignIn.currentUser?.email ?? "",
+                                style:
+                                    Constant.subtitle_500_12(context: context)
+                                        .copyWith(
+                                  color: Constant.textLightGrey,
+                                ),
+                              ),
+                              trailing: Container(
+                                width: Constant.getActualXPhone(
+                                    context: context, x: 36),
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 36),
+                                decoration: BoxDecoration(
+                                  borderRadius: BorderRadius.circular(12.0),
+                                  color: Colors.white,
+                                  shape: BoxShape.rectangle,
+                                  boxShadow: [
+                                    BoxShadow(
+                                      offset: Offset(0, 12),
+                                      blurRadius: 24,
+                                      color:
+                                          Color.fromRGBO(145, 158, 171, 0.12),
+                                    ),
+                                  ],
+                                ),
+                                child: IconButton(
+                                  onPressed: () {},
+                                  icon: Container(
+                                    width: Constant.getActualXPhone(
+                                        context: context, x: 20),
+                                    height: Constant.getActualYPhone(
+                                        context: context, y: 20),
+                                    child: Image(
+                                      image:
+                                          AssetImage('images/alert_badge.png'),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                            ),
+                    ),
+                  ),
+
+                  SizedBox(
+                    height: Constant.getActualYPhone(context: context, y: 44),
+                  ),
+
+                  //Card Time
+                  Padding(
+                    padding: EdgeInsets.only(
+                      left: Constant.getActualXPhone(context: context, x: 33),
+                      right: Constant.getActualXPhone(context: context, x: 27),
+                    ),
+                    child: Container(
+                      width: Constant.getActualXPhone(context: context, x: 330),
+                      height:
+                          Constant.getActualYPhone(context: context, y: 200),
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(40),
+                        image: DecorationImage(
+                          image: AssetImage(
+                              'images/card_bg_1.png'), // Ganti dengan path gambar Anda
+                          fit: BoxFit.fill, // Sesuaikan cara gambar ditampilkan
+                        ),
+                      ),
+                      child: Padding(
+                        padding: EdgeInsets.only(
+                          top:
+                              Constant.getActualYPhone(context: context, y: 16),
+                          left:
+                              Constant.getActualXPhone(context: context, x: 25),
+                          right:
+                              Constant.getActualXPhone(context: context, x: 25),
+                        ),
+                        child: Container(
+                          width: Constant.getActualXPhone(
+                              context: context, x: 280),
+                          height: Constant.getActualYPhone(
+                              context: context, y: 150),
+                          child: Column(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: [
+                              // Date
+                              RealTimeFormattedDate(),
+                              SizedBox(
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 8),
+                              ),
+
+                              //Time
+                              RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock
+                              SizedBox(
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 20),
+                              ),
+                              Row(
+                                mainAxisAlignment: MainAxisAlignment
+                                    .center, // Menengahkan secara horizontal
+                                children: [
+                                  Spacer(), // Spasi di sebelah kiri "Check In"
+                                  Column(
+                                    children: [
+                                      Image.asset(
+                                        'images/finger_tap.png', // Path gambar untuk "Check In"
+                                        width: Constant.getActualXPhone(
+                                            context: context, x: 22),
+                                        height: Constant.getActualYPhone(
+                                            context: context, y: 22),
+                                      ),
+                                      SizedBox(
+                                        height: Constant.getActualYPhone(
+                                            context: context, y: 8),
+                                      ),
+                                      (varCurrentCheckJamProvider
+                                                  ?.isAbsenClockIn ==
+                                              "TRUE")
+                                          ? Text(
+                                              // '--:--',
+                                              varCurrentCheckJamProvider
+                                                      ?.jamClockIn ??
+                                                  "NULL",
+                                            )
+                                          : Text(
+                                              '--:--',
+                                              style: TextStyle(
+                                                  // Atur gaya teks '--:--' sesuai kebutuhan
+                                                  ),
+                                            ),
+                                      Text(
+                                        'Clock In',
+                                        style: Constant.titleH2_700(
+                                                context: context)
+                                            .copyWith(
+                                          color: Constant.textLightGrey,
+                                        ),
+                                      ),
+                                    ],
+                                  ),
+
+                                  SizedBox(
+                                    width: Constant.getActualXPhone(
+                                        context: context, x: 96),
+                                  ), // Jarak antara "Check In" dan "Check Out"
+                                  Column(
+                                    children: [
+                                      Image.asset(
+                                        'images/finger_tap.png', // Path gambar untuk "Check Out"
+                                        width: Constant.getActualXPhone(
+                                            context: context, x: 22),
+                                        height: Constant.getActualYPhone(
+                                            context: context, y: 22),
+                                      ),
+                                      SizedBox(
+                                        height: Constant.getActualYPhone(
+                                            context: context, y: 8),
+                                      ),
+                                      (varCurrentCheckJamProvider
+                                                  ?.isAbsenClockOut ==
+                                              "TRUE")
+                                          ? Text(
+                                              // '--:--',
+                                              varCurrentCheckJamProvider
+                                                      ?.jamClockOut ??
+                                                  "NULL",
+                                            )
+                                          : Text(
+                                              '--:--',
+                                              style: TextStyle(
+                                                  // Atur gaya teks '--:--' sesuai kebutuhan
+                                                  ),
+                                            ),
+                                      Text(
+                                        'Clock Out',
+                                        style: Constant.titleH2_700(
+                                                context: context)
+                                            .copyWith(
+                                          color: Constant.textLightGrey,
+                                        ),
+                                      ),
+                                    ],
+                                  ),
+                                  Spacer(), // Spasi di sebelah kanan "Check Out"
+                                ],
+                              ),
+
+                              SizedBox(
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 16),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+
+                  SizedBox(
+                    height: Constant.getActualYPhone(context: context, y: 56),
+                  ),
+
+                  //Menu Cuti Lembur
+                  Padding(
+                    padding: EdgeInsets.only(
+                      left: Constant.getActualXPhone(context: context, x: 33),
+                      right: Constant.getActualXPhone(context: context, x: 27),
+                    ),
+                    child: Container(
+                      width: Constant.getActualXPhone(context: context, x: 330),
+                      child: Row(
+                        children: [
+                          //Menu Cuti
+                          Container(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 98),
+                            // color: Colors.amber,
+                            decoration: BoxDecoration(
+                              color: Colors.white,
+                              borderRadius: BorderRadius.circular(16),
+                              boxShadow: [
+                                BoxShadow(
+                                  color: Color.fromRGBO(145, 158, 171, 0.20),
+                                ),
+                              ],
+                            ),
+                            child: Padding(
+                              padding: EdgeInsets.only(
+                                left: Constant.getActualXPhone(
+                                    context: context, x: 12),
+                                right: Constant.getActualXPhone(
+                                    context: context, x: 12),
+                                top: Constant.getActualYPhone(
+                                    context: context, y: 8),
+                                bottom: Constant.getActualYPhone(
+                                    context: context, y: 8),
+                              ),
+                              child: InkWell(
+                                onTap: () {},
+                                child: Column(
+                                  children: [
+                                    Container(
+                                      child: Image(
+                                        width: Constant.getActualXPhone(
+                                            context: context, x: 50),
+                                        height: Constant.getActualYPhone(
+                                            context: context, y: 50),
+                                        image: AssetImage('images/person.png'),
+                                      ),
+                                    ),
+                                    SizedBox(
+                                      height: Constant.getActualYPhone(
+                                          context: context, y: 8),
+                                    ),
+                                    Text(
+                                      'Cuti',
+                                      style: Constant.titleH2_600_14(
+                                              context: context)
+                                          .copyWith(
+                                        color: Constant.textDarkGrey,
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ),
+                          ),
+
+                          SizedBox(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 18),
+                          ),
+
+                          //Menu Lembur
+                          Container(
+                            width: Constant.getActualXPhone(
+                                context: context, x: 98),
+                            // color: Colors.amber,
+                            decoration: BoxDecoration(
+                              color: Colors.white,
+                              borderRadius: BorderRadius.circular(16),
+                              boxShadow: [
+                                BoxShadow(
+                                  color: Color.fromRGBO(145, 158, 171, 0.20),
+                                ),
+                              ],
+                            ),
+                            child: Padding(
+                              padding: EdgeInsets.only(
+                                left: Constant.getActualXPhone(
+                                    context: context, x: 12),
+                                right: Constant.getActualXPhone(
+                                    context: context, x: 12),
+                                top: Constant.getActualYPhone(
+                                    context: context, y: 8),
+                                bottom: Constant.getActualYPhone(
+                                    context: context, y: 8),
+                              ),
+                              child: InkWell(
+                                onTap: () {},
+                                child: Column(
+                                  children: [
+                                    Container(
+                                      child: Image(
+                                        width: Constant.getActualXPhone(
+                                            context: context, x: 50),
+                                        height: Constant.getActualYPhone(
+                                            context: context, y: 50),
+                                        image: AssetImage('images/task.png'),
+                                      ),
+                                    ),
+                                    SizedBox(
+                                      height: Constant.getActualYPhone(
+                                          context: context, y: 8),
+                                    ),
+                                    Text(
+                                      'Lembur',
+                                      style: Constant.titleH2_600_14(
+                                              context: context)
+                                          .copyWith(
+                                        color: Constant.textDarkGrey,
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+
+                  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),
+                        bottom:
+                            Constant.getActualYPhone(context: context, y: 40)),
+                    child: Container(
+                      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,
+                                                ),
+                                              ),
+                                            ],
+                                          ),
+                                        ),
+                                      ],
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screen/home/rekap_kehadiran_home_screen_provider.dart

@@ -0,0 +1,83 @@
+
+import '../../model/rekap_kehadiran_home_screen_model.dart';
+import '../../provider/current_rekap_kehadiran_home_provider.dart';
+import '../../repository/presensi_repository.dart';
+
+import 'package:equatable/equatable.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../provider/dio_provider.dart';
+import '../../provider/graphql_provider.dart';
+import '../../repository/base_repository.dart';
+
+abstract class RekapKehadiranHomeScreenState extends Equatable {
+  final DateTime date;
+  const RekapKehadiranHomeScreenState(this.date);
+  @override
+  List<Object?> get props => [date];
+}
+
+class RekapKehadiranHomeScreenStateInit extends RekapKehadiranHomeScreenState {
+  RekapKehadiranHomeScreenStateInit() : super(DateTime.now());
+}
+
+class RekapKehadiranHomeScreenStateLoading extends RekapKehadiranHomeScreenState {
+  RekapKehadiranHomeScreenStateLoading() : super(DateTime.now());
+}
+
+class RekapKehadiranHomeScreenStateError extends RekapKehadiranHomeScreenState {
+  final String message;
+  RekapKehadiranHomeScreenStateError({
+    required this.message,
+  }) : super(DateTime.now());
+}
+
+class RekapKehadiranHomeScreenStateDone extends RekapKehadiranHomeScreenState {
+  final RekapKehadiranHomeScreenModel model;
+  RekapKehadiranHomeScreenStateDone({
+    required this.model,
+  }) : super(DateTime.now());
+}
+
+//notifier
+class RekapKehadiranHomeScreenNotifier extends StateNotifier<RekapKehadiranHomeScreenState> {
+  final Ref ref;
+  RekapKehadiranHomeScreenNotifier({
+    required this.ref,
+  }) : super(RekapKehadiranHomeScreenStateInit());
+
+  void rekapKehadiranHomeScreen(
+    String M_StaffID,
+    String M_CompanyID,
+    String token,
+    Map<String, dynamic> paramInpVariables,
+  ) async {
+    try {
+      state = RekapKehadiranHomeScreenStateLoading();
+      final graphql = ref.read(graphqlProvider(''));
+      final dio = ref.read(dioProvider);
+      final resp = await PresensiRepository(graphql: graphql, dio: dio)
+          .rekapKehadiranHomeScreen(
+        M_StaffID,
+        M_CompanyID,
+        token,
+        paramInpVariables,
+      );
+      // set ke global state provider currentRekapKehadiranHomeProvider
+      ref.read(currentRekapKehadiranHomeProvider.notifier).update((state) => resp);
+      state = RekapKehadiranHomeScreenStateDone(model: resp);
+    } catch (e) {
+      if (e is BaseRepositoryException) {
+        print(e.message);
+        state = RekapKehadiranHomeScreenStateError(message: e.message ?? "");
+      } else {
+        state = RekapKehadiranHomeScreenStateError(message: e.toString());
+      }
+    }
+  }
+}
+
+// provider
+final rekapKehadiranHomeScreenProvider =
+    StateNotifierProvider<RekapKehadiranHomeScreenNotifier, RekapKehadiranHomeScreenState>(
+  (ref) => RekapKehadiranHomeScreenNotifier(ref: ref),
+);