step 22 : komen ketidakhadiran & lembur

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.INTERNET"/>
-<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
-<uses-permission android:name="android.permission.ACCESS_COARSE_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,29 @@ class Constant {
   // static double designHeight = 1024;
   // static double designWidth = 1440;
 
+  // base url graphql
+  static String baseURLGraphQl = "http://devone.aplikasi.web.id:3300/query";
+
+  static String bearerName = "absensi-sas";
+  static String accountGoogle = "absensi-google-account";
+
   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 +64,111 @@ 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',
+    );
+  }
 }

lib/app/route.dart

@@ -1,4 +1,8 @@
+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: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,10 +10,12 @@ import '../screen/splash/splash_screen.dart';
 const loginRoute = "/loginRoute";
 const splashRoute = "/splashRoute";
 const testFlutterMapRoute = "/testFlutterMapRoute";
+const homeRoute = "/homeRoute";
+const presensiRoute = "/presensiRoute";
+const presensiSelfieRoute = "/presensiSelfieRoute";
 
 class AppRoute {
   static Route<dynamic> generateRoute(RouteSettings settings) {
-
     // test flutter map
     if (settings.name == testFlutterMapRoute) {
       return MaterialPageRoute(builder: (context) {
@@ -21,6 +27,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) {

lib/main.dart

@@ -1,11 +1,31 @@
 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.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 {
@@ -26,6 +46,7 @@ class MyApp extends StatelessWidget {
       ),
       // home: TestMap(),
       initialRoute: loginRoute,
+      // initialRoute: presensiSelfieRoute,
       // initialRoute: testFlutterMapRoute,
       onGenerateRoute: AppRoute.generateRoute,
     );

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/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

@@ -10,4 +10,6 @@ final googleSignInProvider = StateProvider<GoogleSignIn>((ref) {
   );
 });
 
-final currentUserProvider = StateProvider<GoogleSignInAccount?>((ref) => null);
+final currentUserGoogleProvider = StateProvider<GoogleSignInAccount?>((ref) => null);
+
+final isNotifyFromLogout = StateProvider<bool>((ref) => false);

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/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){ 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']);
+
+    // 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/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/home/home_screen.dart

@@ -0,0 +1,956 @@
+import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/provider/current_rekap_kehadiran_home_provider.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';
+import 'rekap_kehadiran_home_screen_provider.dart';
+
+class HomeScreen extends HookConsumerWidget {
+  const HomeScreen({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 varCurrentRekapKehadiranProvider =
+        ref.watch(currentRekapKehadiranHomeProvider);
+    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,
+              );
+
+          // panggil rekap kehadiran home screen
+          ref
+              .read(rekapKehadiranHomeScreenProvider.notifier)
+              .rekapKehadiranHomeScreen(
+                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;
+      }
+    });
+
+    // rekap kehadiran home screen
+    ref.listen(rekapKehadiranHomeScreenProvider, (prev, next) {
+      if (next is RekapKehadiranHomeScreenStateLoading) {
+        isLoadingProsesCheckDistance.value = true;
+      } else if (next is RekapKehadiranHomeScreenStateError) {
+        isLoadingProsesCheckDistance.value = false;
+        print("Error : " + next.toString());
+        SanckbarWidget(
+            context, "Error : " + next.toString(), snackbarType.warning);
+      } else if (next is RekapKehadiranHomeScreenStateDone) {
+        isLoadingProsesCheckDistance.value = false;
+      }
+    });
+
+    return Padding(
+      padding: EdgeInsets.only(
+        top: Constant.getActualYPhone(context: context, y: 30),
+      ),
+      child: Scaffold(
+        backgroundColor: Constant.textWhite,
+        appBar: AppBar(
+          title: Padding(
+            padding: EdgeInsets.only(
+              top: Constant.getActualYPhone(context: context, y: 10),
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  // 'Nama Pengguna',
+                  // googleSignIn.currentUser?.displayName ?? "",
+                  selectedUser?.model.name ?? "",
+                  overflow: TextOverflow.ellipsis,
+                  style: Constant.titleH3_700(context: context).copyWith(
+                    color: Constant.textTrueBlack,
+                  ),
+                ),
+                SizedBox(
+                  height: Constant.getActualYPhone(context: context, y: 2),
+                ),
+                Text(
+                  // 'user@example.com',
+                  selectedUser?.model.nip ?? "",
+                  style: Constant.titleH2_500(context: context).copyWith(
+                    color: Constant.textLightGrey,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          actions: [
+            Padding(
+              padding: EdgeInsets.only(
+                right: Constant.getActualXPhone(context: context, x: 20),
+                bottom: Constant.getActualYPhone(context: context, y: 8),
+              ),
+              child: 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'),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+          backgroundColor: Constant.textWhite,
+          iconTheme: IconThemeData(
+            color: Constant.textBlack,
+          ),
+          // elevation: 1.0,
+          elevation: 0.5,
+        ),
+        drawer: CustomDrawer(),
+        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+        floatingActionButton: Padding(
+          padding: EdgeInsets.only(
+            bottom: Constant.getActualYPhone(context: context, y: 30),
+          ),
+          child: 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: RefreshIndicator(
+            onRefresh: () async {
+              // print('refresh');
+
+              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;
+              }
+
+              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,
+                    );
+
+                // panggil rekap kehadiran home screen
+                ref
+                    .read(rekapKehadiranHomeScreenProvider.notifier)
+                    .rekapKehadiranHomeScreen(
+                      selectedUser?.model.staffId ?? "",
+                      selectedUser?.model.companyId ?? "",
+                      selectedUser?.token ?? "",
+                      inpVariablesCheckPresensiJam,
+                    );
+              }
+            },
+            child: SingleChildScrollView(
+              physics: AlwaysScrollableScrollPhysics(),
+              child: Container(
+                width: Constant.getActualXPhone(context: context, x: 390),
+                // height: Constant.getActualYPhone(context: context, y: 844),
+                child: Column(
+                  children: [
+                    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',
+                                            varCurrentRekapKehadiranProvider?.kehadiran ?? "",
+                                            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 bulan ini',
+                                                  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',
+                                    //         varCurrentRekapKehadiranProvider?.tidakHadir ?? "",
+                                    //         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',
+                                    //         varCurrentRekapKehadiranProvider?.lembur ?? "",
+                                    //         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/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),
+);

lib/screen/login/login_provider.dart

@@ -0,0 +1,98 @@
+import 'dart:convert';
+
+import 'package:absensi_sas/provider/google_login_provider.dart';
+import 'package:google_sign_in/google_sign_in.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+import '../../app/constant.dart';
+import '../../model/auth_model.dart';
+import 'package:equatable/equatable.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../provider/current_user_provider.dart';
+import '../../provider/dio_provider.dart';
+import '../../provider/graphql_provider.dart';
+import '../../repository/auth_repository.dart';
+import '../../repository/base_repository.dart';
+
+abstract class LoginState extends Equatable {
+  final DateTime date;
+  const LoginState(this.date);
+  @override
+  List<Object?> get props => [date];
+}
+
+class LoginStateInit extends LoginState {
+  LoginStateInit() : super(DateTime.now());
+}
+
+class LoginStateLoading extends LoginState {
+  LoginStateLoading() : super(DateTime.now());
+}
+
+class LoginStateError extends LoginState {
+  final String message;
+  LoginStateError({
+    required this.message,
+  }) : super(DateTime.now());
+}
+
+class LoginStateDone extends LoginState {
+  final AuthModel model;
+  LoginStateDone({
+    required this.model,
+  }) : super(DateTime.now());
+}
+
+//notifier
+class LoginNotifier extends StateNotifier<LoginState> {
+  final Ref ref;
+  LoginNotifier({
+    required this.ref,
+  }) : super(LoginStateInit());
+
+  void login(
+    String email,
+    String idGoogleSignIn,
+  ) async {
+    try {
+      state = LoginStateLoading();
+      final graphql = ref.read(graphqlProvider(''));
+      final dio = ref.read(dioProvider);
+      final resp = await AuthRepository(graphql: graphql, dio: dio).login(
+        email,
+        idGoogleSignIn,
+      );
+
+      //Simpan ke token
+      final shared = await SharedPreferences.getInstance();
+      final token = jsonEncode({
+        "date": DateTime.now().toString(),
+        "model": resp.model,
+        "token": resp.token
+      });
+      await shared.setString(Constant.bearerName, token);
+      ref.read(currentUserProvider.notifier).state = resp;
+
+      // // set google sign in account
+      //  final accountEncode = jsonEncode({
+      //   "account": account,
+      // });
+      // await shared.setString(Constant.accountGoogle, accountEncode);
+      // ref.read(currentUserGoogleProvider.notifier).state = acc
+      
+      
+      state = LoginStateDone(model: resp);
+    } catch (e) {
+      if (e is BaseRepositoryException) {
+        state = LoginStateError(message: e.message ?? "");
+      } else {
+        state = LoginStateError(message: e.toString());
+      }
+    }
+  }
+}
+
+// provider
+final loginProvider = StateNotifierProvider<LoginNotifier, LoginState>(
+  (ref) => LoginNotifier(ref: ref),
+);

lib/screen/login/login_screen.dart

@@ -1,37 +1,159 @@
+import 'dart:convert';
+
+import 'package:absensi_sas/screen/login/login_provider.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:google_sign_in/google_sign_in.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 
 import '../../app/constant.dart';
+import '../../app/route.dart';
+import '../../model/auth_model.dart';
+import '../../provider/current_menu_provider.dart';
+import '../../provider/current_user_provider.dart';
 import '../../provider/google_login_provider.dart';
 
+import '../../widget/sankbar_widget.dart';
+
 class LoginScreen extends HookConsumerWidget {
   const LoginScreen({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    
     // inisialisasi
     // ref.watch itu sama spt memantau state terus menerus
     // ref.read itu memantau namun hny 1x saja
-    GoogleSignInAccount? currentUser = ref.watch(currentUserProvider);
+    // GoogleSignInAccount? currentUserGoogle =
+    //     ref.watch(currentUserGoogleProvider);
     final googleSignIn = ref.watch(googleSignInProvider);
 
+    final isLoading = useState(false);
+    // final errorMessage = useState("");
+    final isSuccess = useState(false);
+
     useEffect(() {
-      googleSignIn.onCurrentUserChanged.listen((account) {
+      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
-        // untuk update value ke provider google_login_provider yaitu currentUserProvider
+        // final staffID = ref.read(currentUserProvider)?.model.staffId ?? "0";
-        ref.read(currentUserProvider.notifier).update((state) => account);
+        final shared = await SharedPreferences.getInstance();
+        final bearerString = shared.get(Constant.bearerName).toString();
+        final xmodel = jsonDecode(bearerString);
+        if (xmodel == null) return;
+        final authModel = AuthModel(
+          token: xmodel["token"],
+          model: StaffModel(
+            companyId: xmodel["model"]["companyId"],
+            companyName: xmodel["model"]["companyName"],
+            email: xmodel["model"]["email"],
+            staffId: xmodel["model"]["staffId"],
+            idGoogleSignIn: xmodel['model']['idGoogleSignIn'],
+            name: xmodel['model']['name'],
+            nip: xmodel['model']['nip'],
+            phoneNumber: xmodel["model"]["phoneNumber"],
+            token: xmodel["model"]["token"],
+          ),
+        );
+
+        // ref.read(currentUserProvider.notifier).state = authModel;
+
+        await googleSignIn.signInSilently();
+        googleSignIn.onCurrentUserChanged.listen((account) {
+          // ref
+          //     .read(currentUserGoogleProvider.notifier)
+          //     .update((state) => account);
+          ref.read(currentUserProvider.notifier).state = authModel;
+          ref.read(currentPageProvider.state).update((state) => 0);
+
+          if (account != null &&
+              ref.read(currentUserProvider)?.model.staffId == "0") {
+            // Lakukan login
+            ref.read(loginProvider.notifier).login(
+                  account.email,
+                  account.id,
+                );
+          }
+        });
+
+        // kalau sudah pernah login
+        if (googleSignIn.currentUser?.email != null) {
+          googleSignIn.signInSilently();
+          // ref.read(currentUserGoogleProvider.notifier).update(
+          //       (state) => googleSignIn.currentUser,
+          //     );
+          ref.read(loginProvider.notifier).login(
+                googleSignIn.currentUser?.email ?? "",
+                googleSignIn.currentUser?.id ?? "",
+              );
+        }
+
+        // ref.read(currentUserProvider.notifier).state = authModel;
+
+        // Navigator.of(context).pushNamedAndRemoveUntil(
+        //   homeRoute,
+        //   (route) => false,
+        // );
       });
-      googleSignIn.signInSilently();
+      return () {};
-      return (){};
+    }, []);
-    }, const []);
+
+    // LISTEN PROVIDER
+    ref.listen(loginProvider, (prev, next) {
+      if (next is LoginStateLoading) {
+        isLoading.value = true;
+      } else if (next is LoginStateError) {
+        isLoading.value = false;
+        // errorMessage.value = next.message;
+        // Timer(const Duration(seconds: 3), () {
+        //   errorMessage.value = "";
+        // });
+        SanckbarWidget(context, next.message, snackbarType.warning);
+      } else if (next is LoginStateDone) {
+        print("Login Done");
+        isLoading.value = false;
+        isSuccess.value = true;
+        ref.read(currentPageProvider.state).update((state) => 0);
+        Navigator.of(context)
+            .pushNamedAndRemoveUntil(homeRoute, (route) => false);
+      }
+    });
 
     // fungsi untuk sync ke google mail
-    Future<void> handleSignIn() async {
+    Future<void> handleSignInGmail() async {
       try {
+        // auth ke email
         await googleSignIn.signIn();
+        googleSignIn.onCurrentUserChanged.listen((account) async {
+          // ref
+          //     .read(currentUserGoogleProvider.notifier)
+          //     .update((state) => account);
+
+          // Check jika account tidak null dan belum login
+          if (account != null &&
+              ref.read(currentUserProvider)?.model.staffId == "0") {
+            // Lakukan login
+            ref.read(loginProvider.notifier).login(
+                  account.email,
+                  account.id,
+                );
+          }
+        });
+        googleSignIn.signInSilently();
+
+         // kalau sudah pernah login
+        if (googleSignIn.currentUser?.email != null) {
+          googleSignIn.signInSilently();
+          //  ref.read(currentUserGoogleProvider.notifier).update(
+          //       (state) => googleSignIn.currentUser,
+          //     );
+          ref.read(loginProvider.notifier).login(
+                googleSignIn.currentUser?.email ?? "",
+                googleSignIn.currentUser?.id ?? "",
+              );
+        }
+
+        // Navigator.of(context)
+        //     .pushNamedAndRemoveUntil(homeRoute, (route) => false);
       } catch (error) {
         if (kDebugMode) {
           print(error);
@@ -47,51 +169,47 @@ class LoginScreen extends HookConsumerWidget {
               SizedBox(
                 height: Constant.getActualYPhone(context: context, y: 100),
               ),
-              (currentUser != null) 
+              // (currentUserGoogle != null)
-                  ? Container(
+              //     ? Container(
-                      child: ListTile(
+              //         child: ListTile(
-                        leading: GoogleUserCircleAvatar(
+              //           leading: GoogleUserCircleAvatar(
-                          identity: currentUser,
+              //             identity: currentUserGoogle,
-                        ),
+              //           ),
-                        title: Text(
+              //           title: Text(
-                          currentUser.displayName ?? "",
+              //             currentUserGoogle.displayName ?? "",
-                        ),
+              //           ),
-                        subtitle: Text(
+              //           subtitle: Text(
-                          currentUser.email,
+              //             currentUserGoogle.email,
-                        ),
+              //           ),
-                        trailing: IconButton(
+              //           trailing: IconButton(
-                          icon: Icon(Icons.logout_outlined),
+              //             icon: Icon(Icons.logout_outlined),
-                          onPressed: () async {
+              //             onPressed: () async {
-                            await googleSignIn.disconnect();
+              //               await googleSignIn.disconnect();
-                          },
+              //             },
-                        ),
+              //           ),
-                      ),
+              //         ),
-                    )
+              //       )
-                  :
+              //     :
-                  // Logo Landscape
+              // Logo Landscape
-                  Padding(
+              Padding(
-                      padding: EdgeInsets.only(
+                padding: EdgeInsets.only(
-                        top: Constant.getActualYPhone(context: context, y: 120),
+                  top: Constant.getActualYPhone(context: context, y: 120),
-                        left: Constant.getActualXPhone(context: context, x: 91),
+                  left: Constant.getActualXPhone(context: context, x: 91),
-                        right:
+                  right: Constant.getActualXPhone(context: context, x: 90),
-                            Constant.getActualXPhone(context: context, x: 90),
+                  // bottom: Constant.getActualYPhone(context: context, y: y)
-                        // bottom: Constant.getActualYPhone(context: context, y: y)
+                ),
-                      ),
+                child: Container(
-                      child: Container(
+                  width: Constant.getActualXPhone(context: context, x: 209),
-                        width:
+                  height: Constant.getActualYPhone(context: context, y: 70),
-                            Constant.getActualXPhone(context: context, x: 209),
+                  decoration: BoxDecoration(
-                        height:
+                    // color: Colors.green,
-                            Constant.getActualYPhone(context: context, y: 70),
+                    image: DecorationImage(
-                        decoration: BoxDecoration(
+                      // fit: BoxFit.contain,
-                          // color: Colors.green,
+                      image: AssetImage('images/logo_sismedika_landscape.png'),
-                          image: DecorationImage(
-                            // fit: BoxFit.contain,
-                            image: AssetImage(
-                                'images/logo_sismedika_landscape.png'),
-                          ),
-                        ),
-                      ),
                     ),
+                  ),
+                ),
+              ),
 
               SizedBox(
                 height: Constant.getActualYPhone(context: context, y: 100),
@@ -138,6 +256,17 @@ class LoginScreen extends HookConsumerWidget {
                 ],
               ),
 
+              SizedBox(
+                height: Constant.getActualYPhone(context: context, y: 10),
+              ),
+
+              // ElevatedButton(
+              //   onPressed: () async {
+              //     await googleSignIn.disconnect();
+              //   },
+              //   child: Text('logout'),
+              // ),
+
               SizedBox(
                 height: Constant.getActualYPhone(context: context, y: 64),
               ),
@@ -153,35 +282,53 @@ class LoginScreen extends HookConsumerWidget {
                   height: Constant.getActualYPhone(context: context, y: 48),
                   child: ElevatedButton(
                     onPressed: () async {
-                      await handleSignIn();
+                      await handleSignInGmail();
                     },
-                    child: Row(
+                    child: Stack(
-                      mainAxisAlignment: MainAxisAlignment.center,
                       children: [
-                        Container(
+                        (isLoading.value)
-                          width:
+                            ? SizedBox(
-                              Constant.getActualXPhone(context: context, x: 24),
+                                width: Constant.getActualXPhone(
-                          height:
+                                    context: context, x: 24),
-                              Constant.getActualYPhone(context: context, y: 24),
+                                height: Constant.getActualYPhone(
-                          decoration: BoxDecoration(
+                                    context: context, y: 24),
-                            // color: Colors.green,
+                                child: Center(
-                            image: DecorationImage(
+                                  child: CircularProgressIndicator(
-                              // fit: BoxFit.contain,
+                                    color: Constant.textTrueBlack,
-                              image: AssetImage('images/icon_google.png'),
+                                  ),
-                            ),
+                                ),
-                          ),
+                              )
-                        ),
+                            : Row(
-                        SizedBox(
+                                mainAxisAlignment: MainAxisAlignment.center,
-                          width:
+                                children: [
-                              Constant.getActualXPhone(context: context, x: 2),
+                                  Container(
-                        ),
+                                    width: Constant.getActualXPhone(
-                        Text(
+                                        context: context, x: 24),
-                          'Continue with Google',
+                                    height: Constant.getActualYPhone(
-                          style: Constant.logintitle_700(context: context)
+                                        context: context, y: 24),
-                              .copyWith(
+                                    decoration: BoxDecoration(
-                            color: Constant.textBlack,
+                                      // color: Colors.green,
-                          ),
+                                      image: DecorationImage(
-                        ),
+                                        // fit: BoxFit.contain,
+                                        image: AssetImage(
+                                            'images/icon_google.png'),
+                                      ),
+                                    ),
+                                  ),
+                                  SizedBox(
+                                    width: Constant.getActualXPhone(
+                                        context: context, x: 2),
+                                  ),
+                                  Text(
+                                    'Continue with Google',
+                                    style: Constant.logintitle_700(
+                                            context: context)
+                                        .copyWith(
+                                      color: Constant.textBlack,
+                                    ),
+                                  ),
+                                ],
+                              ),
                       ],
                     ),
                     style: ButtonStyle(

lib/screen/login/logout_provider.dart

@@ -0,0 +1,70 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../model/logout_response_model.dart';
+import '../../provider/dio_provider.dart';
+import '../../provider/graphql_provider.dart';
+import '../../repository/auth_repository.dart';
+import '../../repository/base_repository.dart';
+
+// 3. state provider
+final logoutProvider = StateNotifierProvider<LogoutNotifier, LogoutState>(
+    (ref) => LogoutNotifier(ref: ref));
+
+// 2. notifier
+class LogoutNotifier extends StateNotifier<LogoutState> {
+  final Ref ref;
+  LogoutNotifier({required this.ref}) : super(LogoutStateInit());
+  void logout({
+    required String email,
+    required String idGoogleSignIn,
+  }) async {
+    try {
+      state = LogoutStateLoading();
+      final graphql = ref.read(graphqlProvider(''));
+      final dio = ref.read(dioProvider);
+      final resp = await AuthRepository(graphql: graphql, dio: dio).logout(
+        email,
+        idGoogleSignIn,
+      );
+
+      // print(resp);
+      state = LogoutStateDone(model: resp);
+    } catch (e) {
+      if (e is BaseRepositoryException) {
+        state = LogoutStateError(message: e.message ?? "");
+      } else {
+        state = LogoutStateError(message: e.toString());
+      }
+    }
+  }
+}
+
+// 1. state
+abstract class LogoutState extends Equatable {
+  final DateTime date;
+  const LogoutState(this.date);
+  @override
+  List<Object?> get props => [date];
+}
+
+class LogoutStateInit extends LogoutState {
+  LogoutStateInit() : super(DateTime.now());
+}
+
+class LogoutStateLoading extends LogoutState {
+  LogoutStateLoading() : super(DateTime.now());
+}
+
+class LogoutStateError extends LogoutState {
+  final String message;
+  LogoutStateError({
+    required this.message,
+  }) : super(DateTime.now());
+}
+
+class LogoutStateDone extends LogoutState {
+  final LogoutResponseModel model;
+  LogoutStateDone({
+    required this.model,
+  }) : super(DateTime.now());
+}

lib/screen/presensi/check_distance_provider.dart

@@ -0,0 +1,98 @@
+import 'package:absensi_sas/provider/current_user_provider.dart';
+import 'package:absensi_sas/repository/presensi_repository.dart';
+
+import 'package:equatable/equatable.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../model/check_distance_model.dart';
+import '../../provider/current_check_distance_provider.dart';
+import '../../provider/dio_provider.dart';
+import '../../provider/graphql_provider.dart';
+import '../../repository/base_repository.dart';
+import 'check_presensi_jam_provider.dart';
+
+abstract class CheckDistanceState extends Equatable {
+  final DateTime date;
+  const CheckDistanceState(this.date);
+  @override
+  List<Object?> get props => [date];
+}
+
+class CheckDistanceStateInit extends CheckDistanceState {
+  CheckDistanceStateInit() : super(DateTime.now());
+}
+
+class CheckDistanceStateLoading extends CheckDistanceState {
+  CheckDistanceStateLoading() : super(DateTime.now());
+}
+
+class CheckDistanceStateError extends CheckDistanceState {
+  final String message;
+  CheckDistanceStateError({
+    required this.message,
+  }) : super(DateTime.now());
+}
+
+class CheckDistanceStateDone extends CheckDistanceState {
+  final CheckDistanceModel model;
+  CheckDistanceStateDone({
+    required this.model,
+  }) : super(DateTime.now());
+}
+
+//notifier
+class CheckDistanceNotifier extends StateNotifier<CheckDistanceState> {
+  final Ref ref;
+  CheckDistanceNotifier({
+    required this.ref,
+  }) : super(CheckDistanceStateInit());
+
+  void checkDistance(
+    String M_StaffID,
+    String M_CompanyID,
+    String CurrentLatitude,
+    String CurrentLongitude,
+  ) async {
+    try {
+      state = CheckDistanceStateLoading();
+      final graphql = ref.read(graphqlProvider(''));
+      final dio = ref.read(dioProvider);
+      final resp =
+          await PresensiRepository(graphql: graphql, dio: dio).checkDistance(
+        M_StaffID,
+        M_CompanyID,
+        CurrentLatitude,
+        CurrentLongitude,
+      );
+      // set ke global state provider
+      ref.read(currentCheckDistanceProvider.notifier).update((state) => resp);
+
+      // panggil provider cek jam masuk dan pulang (checkPresensiJamProvider)
+      final user = ref.read(currentUserProvider);
+      Map<String, dynamic> inpVariablesCheckPresensiJam = {
+        "M_StaffID": M_StaffID,
+        "M_CompanyID": M_CompanyID,
+        "token": user?.token ?? "",
+      };
+      ref.read(checkPresensiJamProvider.notifier).checkPresensiJam(
+            M_StaffID,
+            M_CompanyID,
+            user?.token ?? "",
+            inpVariablesCheckPresensiJam,
+          );
+
+      state = CheckDistanceStateDone(model: resp);
+    } catch (e) {
+      if (e is BaseRepositoryException) {
+        state = CheckDistanceStateError(message: e.message ?? "");
+      } else {
+        state = CheckDistanceStateError(message: e.toString());
+      }
+    }
+  }
+}
+
+// provider
+final checkDistanceProvider =
+    StateNotifierProvider<CheckDistanceNotifier, CheckDistanceState>(
+  (ref) => CheckDistanceNotifier(ref: ref),
+);

lib/screen/presensi/check_presensi_jam_provider.dart

@@ -0,0 +1,82 @@
+import 'package:absensi_sas/model/check_presensi_jam_model.dart';
+import 'package:absensi_sas/repository/presensi_repository.dart';
+
+import 'package:equatable/equatable.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../provider/current_check_jam_presensi_provider.dart';
+import '../../provider/dio_provider.dart';
+import '../../provider/graphql_provider.dart';
+import '../../repository/base_repository.dart';
+
+abstract class CheckPresensiJamState extends Equatable {
+  final DateTime date;
+  const CheckPresensiJamState(this.date);
+  @override
+  List<Object?> get props => [date];
+}
+
+class CheckPresensiJamStateInit extends CheckPresensiJamState {
+  CheckPresensiJamStateInit() : super(DateTime.now());
+}
+
+class CheckPresensiJamStateLoading extends CheckPresensiJamState {
+  CheckPresensiJamStateLoading() : super(DateTime.now());
+}
+
+class CheckPresensiJamStateError extends CheckPresensiJamState {
+  final String message;
+  CheckPresensiJamStateError({
+    required this.message,
+  }) : super(DateTime.now());
+}
+
+class CheckPresensiJamStateDone extends CheckPresensiJamState {
+  final CheckPresensiJamModel model;
+  CheckPresensiJamStateDone({
+    required this.model,
+  }) : super(DateTime.now());
+}
+
+//notifier
+class CheckPresensiJamNotifier extends StateNotifier<CheckPresensiJamState> {
+  final Ref ref;
+  CheckPresensiJamNotifier({
+    required this.ref,
+  }) : super(CheckPresensiJamStateInit());
+
+  void checkPresensiJam(
+    String M_StaffID,
+    String M_CompanyID,
+    String token,
+    Map<String, dynamic> paramInpVariables,
+  ) async {
+    try {
+      state = CheckPresensiJamStateLoading();
+      final graphql = ref.read(graphqlProvider(''));
+      final dio = ref.read(dioProvider);
+      final resp = await PresensiRepository(graphql: graphql, dio: dio)
+          .checkPresensiJam(
+        M_StaffID,
+        M_CompanyID,
+        token,
+        paramInpVariables,
+      );
+      // set ke global state provider currentCheckJamPresensiProvider
+      ref.read(currentCheckJamPresensiProvider.notifier).update((state) => resp);
+      state = CheckPresensiJamStateDone(model: resp);
+    } catch (e) {
+      if (e is BaseRepositoryException) {
+        print(e.message);
+        state = CheckPresensiJamStateError(message: e.message ?? "");
+      } else {
+        state = CheckPresensiJamStateError(message: e.toString());
+      }
+    }
+  }
+}
+
+// provider
+final checkPresensiJamProvider =
+    StateNotifierProvider<CheckPresensiJamNotifier, CheckPresensiJamState>(
+  (ref) => CheckPresensiJamNotifier(ref: ref),
+);

lib/screen/presensi/presensi_clock_in_provider.dart

@@ -0,0 +1,102 @@
+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';
+import 'check_presensi_jam_provider.dart';
+
+abstract class PresensiClockInState extends Equatable {
+  final DateTime date;
+  const PresensiClockInState(this.date);
+  @override
+  List<Object?> get props => [date];
+}
+
+class PresensiClockInStateInit extends PresensiClockInState {
+  PresensiClockInStateInit() : super(DateTime.now());
+}
+
+class PresensiClockInStateLoading extends PresensiClockInState {
+  PresensiClockInStateLoading() : super(DateTime.now());
+}
+
+class PresensiClockInStateError extends PresensiClockInState {
+  final String message;
+  PresensiClockInStateError({
+    required this.message,
+  }) : super(DateTime.now());
+}
+
+class PresensiClockInStateDone extends PresensiClockInState {
+  final String model;
+  PresensiClockInStateDone({
+    required this.model,
+  }) : super(DateTime.now());
+}
+
+//notifier
+class PresensiClockInNotifier extends StateNotifier<PresensiClockInState> {
+  final Ref ref;
+  PresensiClockInNotifier({
+    required this.ref,
+  }) : super(PresensiClockInStateInit());
+
+  void presensiClockIn(
+    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 {
+    try {
+      state = PresensiClockInStateLoading();
+      final graphql = ref.read(graphqlProvider(''));
+      final dio = ref.read(dioProvider);
+      final resp = await PresensiRepository(graphql: graphql, dio: dio)
+          .presensiNormalClockIn(
+        T_TransactionM_StaffID,
+        T_TransactionM_CompanyID,
+        T_TransactionCurrentLatitude,
+        T_TransactionCurrentLongitude,
+        T_TransactionCurrentDistance,
+        T_TransactionSelfiePhoto,
+        token,
+        isSelfie,
+        paramInpVariables,
+      );
+
+      // panggil provider cek jam masuk dan pulang (checkPresensiJamProvider)
+      Map<String, dynamic> inpVariablesCheckPresensiJam = {
+        "M_StaffID": T_TransactionM_StaffID,
+        "M_CompanyID": T_TransactionM_CompanyID,
+        "token": token,
+      };
+      ref.read(checkPresensiJamProvider.notifier).checkPresensiJam(
+            T_TransactionM_StaffID,
+            T_TransactionM_CompanyID,
+            token,
+            inpVariablesCheckPresensiJam,
+          );
+      print('call check presensi');
+      state = PresensiClockInStateDone(model: resp);
+    } catch (e) {
+      if (e is BaseRepositoryException) {
+        state = PresensiClockInStateError(message: e.message ?? "");
+      } else {
+        state = PresensiClockInStateError(message: e.toString());
+      }
+    }
+  }
+}
+
+// provider
+final presensiClockInProvider =
+    StateNotifierProvider<PresensiClockInNotifier, PresensiClockInState>(
+  (ref) => PresensiClockInNotifier(ref: ref),
+);

lib/screen/presensi/presensi_clock_out_provider.dart

@@ -0,0 +1,102 @@
+import 'package:absensi_sas/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';
+import 'check_presensi_jam_provider.dart';
+
+abstract class PresensiClockOutState extends Equatable {
+  final DateTime date;
+  const PresensiClockOutState(this.date);
+  @override
+  List<Object?> get props => [date];
+}
+
+class PresensiClockOutStateInit extends PresensiClockOutState {
+  PresensiClockOutStateInit() : super(DateTime.now());
+}
+
+class PresensiClockOutStateLoading extends PresensiClockOutState {
+  PresensiClockOutStateLoading() : super(DateTime.now());
+}
+
+class PresensiClockOutStateError extends PresensiClockOutState {
+  final String message;
+  PresensiClockOutStateError({
+    required this.message,
+  }) : super(DateTime.now());
+}
+
+class PresensiClockOutStateDone extends PresensiClockOutState {
+  final String model;
+  PresensiClockOutStateDone({
+    required this.model,
+  }) : super(DateTime.now());
+}
+
+//notifier
+class PresensiClockOutNotifier extends StateNotifier<PresensiClockOutState> {
+  final Ref ref;
+  PresensiClockOutNotifier({
+    required this.ref,
+  }) : super(PresensiClockOutStateInit());
+
+  void presensiClockOut(
+    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 {
+    try {
+      state = PresensiClockOutStateLoading();
+      final graphql = ref.read(graphqlProvider(''));
+      final dio = ref.read(dioProvider);
+      final resp = await PresensiRepository(graphql: graphql, dio: dio)
+          .presensiNormalClockOut(
+        T_TransactionM_StaffID,
+        T_TransactionM_CompanyID,
+        T_TransactionCurrentLatitude,
+        T_TransactionCurrentLongitude,
+        T_TransactionCurrentDistance,
+        T_TransactionSelfiePhoto,
+        token,
+        isSelfie,
+        paramInpVariables,
+      );
+
+      // panggil provider cek jam masuk dan pulang (checkPresensiJamProvider)
+      Map<String, dynamic> inpVariablesCheckPresensiJam = {
+        "M_StaffID": T_TransactionM_StaffID,
+        "M_CompanyID": T_TransactionM_CompanyID,
+        "token": token,
+      };
+      ref.read(checkPresensiJamProvider.notifier).checkPresensiJam(
+            T_TransactionM_StaffID,
+            T_TransactionM_CompanyID,
+            token,
+            inpVariablesCheckPresensiJam,
+          );
+      print('call check presensi clockout');
+      state = PresensiClockOutStateDone(model: resp);
+    } catch (e) {
+      if (e is BaseRepositoryException) {
+        state = PresensiClockOutStateError(message: e.message ?? "");
+      } else {
+        state = PresensiClockOutStateError(message: e.toString());
+      }
+    }
+  }
+}
+
+// provider
+final presensiClockOutProvider =
+    StateNotifierProvider<PresensiClockOutNotifier, PresensiClockOutState>(
+  (ref) => PresensiClockOutNotifier(ref: ref),
+);

lib/screen/presensi/presensi_screen.dart

@@ -0,0 +1,778 @@
+import 'dart:convert';
+
+import 'package:absensi_sas/provider/current_check_jam_presensi_provider.dart';
+import 'package:absensi_sas/screen/presensi/check_distance_provider.dart';
+import 'package:absensi_sas/screen/presensi/check_presensi_jam_provider.dart';
+import 'package:absensi_sas/screen/presensi/presensi_clock_in_provider.dart';
+import 'package:absensi_sas/widget/real_date.dart';
+import 'package:absensi_sas/widget/sankbar_widget.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:hooks_riverpod/hooks_riverpod.dart';
+import 'package:permission_handler/permission_handler.dart';
+
+import '../../app/constant.dart';
+import '../../app/route.dart';
+import '../../provider/current_check_distance_provider.dart';
+import '../../provider/current_user_provider.dart';
+import '../../widget/custom_drawer.dart';
+import '../../widget/real_time.dart';
+import 'presensi_clock_out_provider.dart';
+
+class PresensiScreen extends HookConsumerWidget {
+  const PresensiScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currentAddressUserLocation = useState<String>("");
+    final isLoadingAddressUserLocation = useState<bool>(false);
+    final isLoadingProsesCheckDistance = useState<bool>(false);
+    final varCurrentDistanceProvider = ref.watch(currentCheckDistanceProvider);
+    final varCurrentCheckJamProvider =
+        ref.watch(currentCheckJamPresensiProvider);
+    final selectedUser = ref.watch(currentUserProvider);
+
+    final positionLatitude = useState<String>("");
+    final positionLongitude = useState<String>("");
+    // final tTransactionCurrentDistance = useState<String>("NULL");
+
+    Future<void> getAddressFromLocation() async {
+      try {
+        isLoadingAddressUserLocation.value = true;
+        // Mendapatkan posisi pengguna
+        LocationPermission permission = await Geolocator.requestPermission();
+
+        if (permission == LocationPermission.denied) {
+          isLoadingAddressUserLocation.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 (positionLongitude.value.isEmpty && positionLatitude.value.isEmpty) {
+          if (placemarks.isNotEmpty) {
+            isLoadingAddressUserLocation.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();
+
+            if (address != "") {
+              currentAddressUserLocation.value = address;
+            }
+          } else {
+            isLoadingAddressUserLocation.value = false;
+            SanckbarWidget(
+                context, 'Tidak dapat menemukan alamat.', snackbarType.error);
+            print("Tidak dapat menemukan alamat.");
+          }
+        } else {
+          // jika sudah dapat latitude dan logitude baru panggil check distance provider
+          if (positionLatitude.value.isNotEmpty &&
+              positionLongitude.value.isNotEmpty) {
+            print('check distance provider');
+
+            // panggil check distance provider
+            ref.read(checkDistanceProvider.notifier).checkDistance(
+                  selectedUser?.model.staffId ?? "",
+                  selectedUser?.model.companyId ?? "",
+                  positionLatitude.value,
+                  positionLongitude.value,
+                );
+          }
+        }
+      } catch (e) {
+        print("Error: $e");
+        isLoadingAddressUserLocation.value = false;
+        SanckbarWidget(context, 'Error : $e', snackbarType.error);
+      }
+    }
+
+    Future<void> requestLocationPermission() async {
+      var status = await Permission.location.request();
+      isLoadingAddressUserLocation.value = true;
+      if (status.isGranted) {
+        // Izin diberikan, lanjutkan dengan mendapatkan lokasi
+        getAddressFromLocation();
+      } else {
+        isLoadingAddressUserLocation.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) {
+      print('status check distance ' + next.toString());
+      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;
+
+        // tTransactionCurrentDistance.value =
+        //     varCurrentDistanceProvider?.currentDistance ?? "";
+
+        // print("distance XXX : "+tTransactionCurrentDistance.value);
+
+        if (varCurrentDistanceProvider?.selfie == "TRUE") {
+          Navigator.pushNamed(context, presensiSelfieRoute);
+        }
+      }
+    });
+
+    // check jam presensi
+    ref.listen(checkPresensiJamProvider, (prev, next) {
+      if (next is CheckPresensiJamStateLoading) {
+        isLoadingProsesCheckDistance.value = true;
+      } else if (next is CheckPresensiJamStateError) {
+        isLoadingProsesCheckDistance.value = false;
+        SanckbarWidget(
+            context, "Error : " + next.toString(), snackbarType.warning);
+      } else if (next is CheckPresensiJamStateDone) {
+        isLoadingProsesCheckDistance.value = false;
+      }
+    });
+
+    // proses presensi clock in
+    ref.listen(presensiClockInProvider, (prev, next) {
+      if (next is PresensiClockInStateLoading) {
+        isLoadingProsesCheckDistance.value = true;
+      } else if (next is PresensiClockInStateError) {
+        isLoadingProsesCheckDistance.value = false;
+        SanckbarWidget(
+            context, "Error : " + next.toString(), snackbarType.warning);
+      } else if (next is PresensiClockInStateDone) {
+        isLoadingProsesCheckDistance.value = false;
+        if (next.model == "OK") {
+          SanckbarWidget(context, "Berhasil Absen Masuk", snackbarType.success);
+          requestLocationPermission();
+        }
+        // else{
+        //   if(next.model == "WARNING"){
+        //     SanckbarWidget(context, "Berhasil Absen Masuk", snackbarType.success);
+        //   }
+        // }
+      }
+    });
+
+    // proses presensi clock in
+    ref.listen(presensiClockOutProvider, (prev, next) {
+      if (next is PresensiClockOutStateLoading) {
+        isLoadingProsesCheckDistance.value = true;
+      } else if (next is PresensiClockOutStateError) {
+        isLoadingProsesCheckDistance.value = false;
+        SanckbarWidget(
+            context, "Error : " + next.toString(), snackbarType.warning);
+      } else if (next is PresensiClockOutStateDone) {
+        isLoadingProsesCheckDistance.value = false;
+        if (next.model == "OK") {
+          SanckbarWidget(
+              context, "Berhasil Absen Pulang", snackbarType.success);
+          requestLocationPermission();
+        }
+        // else{
+        //   if(next.model == "WARNING"){
+        //     SanckbarWidget(context, "Berhasil Absen Masuk", snackbarType.success);
+        //   }
+        // }
+      }
+    });
+
+    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;
+        }
+
+        // requestLocationPermission();
+      });
+      return () {};
+    }, []);
+
+    useEffect(() {
+      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+        requestLocationPermission();
+      });
+      return () {};
+    }, []);
+
+    // show konfirmasi dialog
+    Future<void> showConfirmationDialog(
+      BuildContext context,
+      String T_TransactionM_StaffID,
+      String T_TransactionM_CompanyID,
+      String T_TransactionCurrentLatitude,
+      String T_TransactionCurrentLongitude,
+      String T_TransactionCurrentDistance,
+      String T_TransactionSelfiePhoto,
+      String token,
+      String tipeAbsen,
+    ) async {
+      return showDialog(
+        context: context,
+        builder: (BuildContext context) {
+          return AlertDialog(
+            title: Text('Konfirmasi'),
+            content: Text('Apakah anda yakin untuk melakukan $tipeAbsen?'),
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(8.0),
+            ),
+            actions: <Widget>[
+              ElevatedButton(
+                onPressed: () {
+                  T_TransactionSelfiePhoto = "";
+
+                  Map<String, dynamic> param = {
+                    "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": "FALSE"
+                  };
+                  // print(param);
+
+                  if (tipeAbsen == "Clock In") {
+                    ref.read(presensiClockInProvider.notifier).presensiClockIn(
+                          T_TransactionM_StaffID,
+                          T_TransactionM_CompanyID,
+                          T_TransactionCurrentLatitude,
+                          T_TransactionCurrentLongitude,
+                          T_TransactionCurrentDistance,
+                          T_TransactionSelfiePhoto,
+                          token,
+                          "FALSE",
+                          param,
+                        );
+                    Navigator.of(context).pop();
+                  } else {
+                    if (tipeAbsen == "Clock Out") {
+                      ref
+                          .read(presensiClockOutProvider.notifier)
+                          .presensiClockOut(
+                            T_TransactionM_StaffID,
+                            T_TransactionM_CompanyID,
+                            T_TransactionCurrentLatitude,
+                            T_TransactionCurrentLongitude,
+                            T_TransactionCurrentDistance,
+                            T_TransactionSelfiePhoto,
+                            token,
+                            "FALSE",
+                            param,
+                          );
+                      Navigator.of(context).pop();
+                    }
+                  }
+                },
+                child: Text(
+                  'Yakin',
+                  style: Constant.logintitle_700(context: context).copyWith(
+                    fontWeight: FontWeight.w600,
+                    color: Constant.textWhite,
+                  ),
+                ),
+                style: ButtonStyle(
+                  backgroundColor: MaterialStateColor.resolveWith(
+                      (st) => Constant.textOrange),
+                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                    RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(8),
+                      side: BorderSide(
+                        color: Constant.textOrange,
+                      ),
+                    ),
+                  ),
+                  shadowColor: MaterialStateProperty.all(Color(0xffff48423d)),
+                  elevation: MaterialStateProperty.all(4.0),
+                ),
+              ),
+              TextButton(
+                onPressed: () {
+                  Navigator.of(context).pop(); // Tutup dialog
+                },
+                style: ButtonStyle(
+                  backgroundColor: MaterialStateColor.resolveWith(
+                      (st) => Constant.textWhite),
+                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                    RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(8),
+                      side: BorderSide(
+                        color: Constant.textBlack,
+                      ),
+                    ),
+                  ),
+                  shadowColor: MaterialStateProperty.all(Color(0xffff48423d)),
+                  elevation: MaterialStateProperty.all(4.0),
+                ),
+                child: Text(
+                  'Batal',
+                  style: TextStyle(
+                    color: Constant.textTrueBlack,
+                  ),
+                ),
+              ),
+            ],
+          );
+        },
+      );
+    }
+
+    return Padding(
+      padding: EdgeInsets.only(
+        top: Constant.getActualYPhone(context: context, y: 30),
+      ),
+      child: Scaffold(
+        backgroundColor: Constant.textWhite,
+        appBar: AppBar(
+          title: Text(
+            // 'Home Screen',
+            'Presensi',
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(
+              color: Constant.textBlack,
+            ),
+          ),
+          backgroundColor: Constant.textWhite,
+          iconTheme: IconThemeData(
+            color: Constant.textBlack,
+          ),
+          // elevation: 1.0,
+          elevation: 0.5,
+        ),
+        drawer: CustomDrawer(),
+        body: SafeArea(
+          child: 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(
+              width: Constant.getActualXPhone(context: context, x: 390),
+              // height: Constant.getActualYPhone(context: context, y: 844),
+              height: MediaQuery.of(context).size.height,
+              child: Column(
+                children: [
+                  // Text(ref.watch(currentCheckDistanceProvider)?.currentDistance ?? "NULL"),
+                  // Spacer(),
+                  // tanggal sekarang
+                  RealTimeFormattedDate(),
+                  SizedBox(
+                    height: Constant.getActualYPhone(context: context, y: 8),
+                  ),
+                  // jam sekarang
+                  RealTimeClock(),
+                  SizedBox(
+                    height: Constant.getActualYPhone(context: context, y: 24),
+                  ),
+
+                  // address dan refresh
+                  Container(
+                    width: Constant.getActualXPhone(context: context, x: 350),
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(16),
+                      color: Constant.bgAddressPresensi,
+                    ),
+                    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: 12),
+                        bottom:
+                            Constant.getActualYPhone(context: context, y: 12),
+                      ),
+                      child: Row(
+                        children: [
+                          // Bagian kiri
+                          Padding(
+                            padding: EdgeInsets.only(left: 12, right: 8),
+                            child: Column(
+                              children: [
+                                Icon(
+                                  Icons.location_on_outlined,
+                                  color: Constant.textDarkGrey,
+                                ),
+                              ],
+                            ),
+                          ),
+
+                          // Bagian tengah
+                          Expanded(
+                            child: Padding(
+                              padding: EdgeInsets.symmetric(horizontal: 8),
+                              child: Column(
+                                children: [
+                                  (isLoadingAddressUserLocation.value)
+                                      ? Center(
+                                          child: CircularProgressIndicator(),
+                                        )
+                                      : Text(
+                                          // 'Perumahan Grand House of Klodran No. 5, Klodran, Kec. Colomadu, Kabupaten Karanganyar, Jawa Tengah 57172',
+                                          currentAddressUserLocation.value,
+                                          overflow: TextOverflow.ellipsis,
+                                          maxLines: 10,
+                                          style: Constant.titleH2_400_12(
+                                                  context: context)
+                                              .copyWith(
+                                            color: Constant.textDarkGrey,
+                                          ),
+                                        ),
+                                ],
+                              ),
+                            ),
+                          ),
+
+                          // Bagian kanan
+                          Padding(
+                            padding: EdgeInsets.only(right: 12),
+                            child: Column(
+                              children: [
+                                InkWell(
+                                  onTap: () async {
+                                    getAddressFromLocation();
+                                    // jika sudah dapat latitude dan logitude baru panggil check distance provider
+                                    if (positionLatitude.value.isNotEmpty &&
+                                        positionLongitude.value.isNotEmpty) {
+                                      // panggil check distance provider
+                                      ref
+                                          .read(checkDistanceProvider.notifier)
+                                          .checkDistance(
+                                            selectedUser?.model.staffId ?? "",
+                                            selectedUser?.model.companyId ?? "",
+                                            positionLatitude.value,
+                                            positionLongitude.value,
+                                          );
+                                    }
+                                  },
+                                  child: Container(
+                                    width: Constant.getActualXPhone(
+                                        context: context, x: 36),
+                                    height: Constant.getActualYPhone(
+                                        context: context, y: 36),
+                                    decoration: BoxDecoration(
+                                      borderRadius: BorderRadius.circular(12),
+                                      color: Constant.textOrange,
+                                    ),
+                                    child: Image.asset(
+                                      'images/sync_white.png', // Path gambar untuk "Refresh"
+                                      width: Constant.getActualXPhone(
+                                          context: context, x: 20),
+                                      height: Constant.getActualYPhone(
+                                          context: context, y: 20),
+                                    ),
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+
+                  SizedBox(
+                    height: Constant.getActualYPhone(context: context, y: 50),
+                  ),
+
+                  // tombol aksi absen masuk & pulang
+                  if (varCurrentCheckJamProvider?.isAbsenClockIn == "TRUE" &&
+                      varCurrentCheckJamProvider?.isAbsenClockOut ==
+                          "TRUE") ...[
+                    SizedBox.shrink()
+                  ] else ...[
+                    if (varCurrentCheckJamProvider?.isAbsenClockIn == "FALSE" &&
+                        varCurrentCheckJamProvider?.jamClockIn == "") ...[
+                      // gambar icon presensi clock in
+                      (isLoadingAddressUserLocation.value)
+                          ? Center(
+                              child: CircularProgressIndicator(),
+                            )
+                          : Container(
+                              width: Constant.getActualXPhone(
+                                  context: context, x: 130),
+                              height: Constant.getActualYPhone(
+                                  context: context, y: 130),
+                              child: FittedBox(
+                                child: FloatingActionButton(
+                                  onPressed: () async {
+                                    final T_TransactionM_StaffID =
+                                        selectedUser?.model.staffId ?? "";
+                                    final T_TransactionM_CompanyID =
+                                        selectedUser?.model.companyId ?? "";
+                                    final T_TransactionCurrentLatitude =
+                                        positionLatitude.value;
+                                    final T_TransactionCurrentLongitude =
+                                        positionLongitude.value;
+                                    final T_TransactionCurrentDistance =
+                                        varCurrentDistanceProvider
+                                                ?.currentDistance ??
+                                            "";
+                                    final T_TransactionSelfiePhoto = "";
+                                    final token = selectedUser?.token ?? "";
+
+                                    showConfirmationDialog(
+                                        context,
+                                        T_TransactionM_StaffID,
+                                        T_TransactionM_CompanyID,
+                                        T_TransactionCurrentLatitude,
+                                        T_TransactionCurrentLongitude,
+                                        T_TransactionCurrentDistance,
+                                        T_TransactionSelfiePhoto,
+                                        token,
+                                        "Clock In");
+                                  },
+                                  backgroundColor: Color(0xFFFFFFFF),
+                                  shape: CircleBorder(),
+                                  child: Container(
+                                    width: Constant.getActualXPhone(
+                                        context: context, x: 130),
+                                    height: Constant.getActualYPhone(
+                                        context: context, y: 130),
+                                    decoration: BoxDecoration(
+                                      image: DecorationImage(
+                                        // fit: BoxFit.cover,
+                                        image: AssetImage(
+                                            'images/presensi_finger2.png'), // Ganti dengan path gambar Anda
+                                      ),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                            ),
+                    ] else ...[
+                      // gambar icon presensi clock out
+                      if (varCurrentCheckJamProvider?.isAbsenClockIn ==
+                              "TRUE" &&
+                          varCurrentCheckJamProvider?.jamClockIn != "") ...[
+                        (isLoadingAddressUserLocation.value)
+                            ? Center(
+                                child: CircularProgressIndicator(),
+                              )
+                            : Container(
+                                width: Constant.getActualXPhone(
+                                    context: context, x: 130),
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 130),
+                                child: FittedBox(
+                                  child: FloatingActionButton(
+                                    onPressed: () async {
+                                      final T_TransactionM_StaffID =
+                                          selectedUser?.model.staffId ?? "";
+                                      final T_TransactionM_CompanyID =
+                                          selectedUser?.model.companyId ?? "";
+                                      final T_TransactionCurrentLatitude =
+                                          positionLatitude.value;
+                                      final T_TransactionCurrentLongitude =
+                                          positionLongitude.value;
+                                      final T_TransactionCurrentDistance =
+                                          varCurrentDistanceProvider
+                                                  ?.currentDistance ??
+                                              "";
+                                      final T_TransactionSelfiePhoto = "";
+                                      final token = selectedUser?.token ?? "";
+
+                                      showConfirmationDialog(
+                                          context,
+                                          T_TransactionM_StaffID,
+                                          T_TransactionM_CompanyID,
+                                          T_TransactionCurrentLatitude,
+                                          T_TransactionCurrentLongitude,
+                                          T_TransactionCurrentDistance,
+                                          T_TransactionSelfiePhoto,
+                                          token,
+                                          "Clock Out");
+                                    },
+                                    backgroundColor: Color(0xFFFFFFFF),
+                                    shape: CircleBorder(),
+                                    child: Container(
+                                      width: Constant.getActualXPhone(
+                                          context: context, x: 130),
+                                      height: Constant.getActualYPhone(
+                                          context: context, y: 130),
+                                      decoration: BoxDecoration(
+                                        image: DecorationImage(
+                                          // fit: BoxFit.cover,
+                                          image: AssetImage(
+                                              'images/presensi_finger_clok_out.png'), // Ganti dengan path gambar Anda
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                      ]
+                    ],
+                  ],
+
+                  Spacer(),
+
+                  // clock in & clock out
+                  Padding(
+                    padding: EdgeInsets.only(
+                      left: Constant.getActualXPhone(context: context, x: 70),
+                      right: Constant.getActualXPhone(context: context, x: 70),
+                      // top:
+                      //     Constant.getActualYPhone(context: context, y: 12),
+                      bottom: Constant.getActualYPhone(context: context, y: 55),
+                    ),
+                    child: Container(
+                      width: Constant.getActualXPhone(context: context, x: 390),
+                      // color: Colors.amber,
+                      child: Row(
+                        children: [
+                          Column(
+                            children: [
+                              Image.asset(
+                                'images/clockin_presensi.png', // Path gambar untuk "Clock In"
+                                width: Constant.getActualXPhone(
+                                    context: context, x: 22),
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 22),
+                              ),
+                              SizedBox(
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 8),
+                              ),
+                              (isLoadingAddressUserLocation.value)
+                                  ? Center(
+                                      child: CircularProgressIndicator(),
+                                    )
+                                  : (varCurrentCheckJamProvider
+                                                  ?.isAbsenClockIn ==
+                                              "TRUE" &&
+                                          varCurrentCheckJamProvider
+                                                  ?.jamClockIn !=
+                                              "")
+                                      ? Text(
+                                          // '--:--',
+                                          varCurrentCheckJamProvider
+                                                  ?.jamClockIn ??
+                                              "NULL",
+                                          style: Constant.titlePresensiH2_700(
+                                                  context: context)
+                                              .copyWith(
+                                            color: Constant.textTrueBlack,
+                                          ),
+                                        )
+                                      : Text(
+                                          '--:--',
+                                          style: Constant.titlePresensiH2_700(
+                                                  context: context)
+                                              .copyWith(
+                                            color: Constant.textTrueBlack,
+                                          ),
+                                        ),
+                              SizedBox(
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 4),
+                              ),
+                              Text(
+                                'Clock In',
+                                style: Constant.titleH2_700(context: context)
+                                    .copyWith(
+                                  color: Constant.textLightGrey,
+                                ),
+                              ),
+                            ],
+                          ),
+                          Spacer(),
+                          Column(
+                            children: [
+                              Image.asset(
+                                'images/clockout_presensi.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),
+                              ),
+                              (isLoadingAddressUserLocation.value)
+                                  ? Center(
+                                      child: CircularProgressIndicator(),
+                                    )
+                                  : (varCurrentCheckJamProvider
+                                                  ?.isAbsenClockOut ==
+                                              "TRUE" &&
+                                          varCurrentCheckJamProvider
+                                                  ?.jamClockOut !=
+                                              "")
+                                      ? Text(
+                                          // '--:--',
+                                          varCurrentCheckJamProvider
+                                                  ?.jamClockOut ??
+                                              "NULL",
+                                          style: Constant.titlePresensiH2_700(
+                                                  context: context)
+                                              .copyWith(
+                                            color: Constant.textTrueBlack,
+                                          ),
+                                        )
+                                      : Text(
+                                          '--:--',
+                                          style: Constant.titlePresensiH2_700(
+                                                  context: context)
+                                              .copyWith(
+                                            color: Constant.textTrueBlack,
+                                          ),
+                                        ),
+                              SizedBox(
+                                height: Constant.getActualYPhone(
+                                    context: context, y: 4),
+                              ),
+                              Text(
+                                'Clock Out',
+                                style: Constant.titleH2_700(context: context)
+                                    .copyWith(
+                                  color: Constant.textLightGrey,
+                                ),
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screen/presensi/presensi_selfie_upload_area.dart

@@ -0,0 +1,198 @@
+import 'dart:io';
+
+import '../../app/constant.dart';
+import 'package:flutter/material.dart';
+import 'package:image_picker/image_picker.dart';
+import 'package:mime/mime.dart';
+
+class PresensiSelfieUploadAreaWidget extends StatelessWidget {
+  const PresensiSelfieUploadAreaWidget({
+    super.key,
+    required this.isImage,
+    required this.fileData,
+    required this.fileDataBase64,
+    required this.pickFile,
+    required this.pickImage,
+    required this.isLoading,
+  });
+
+  final ValueNotifier<bool> isImage;
+  final ValueNotifier<bool> isLoading;
+  final ValueNotifier<XFile?> fileData;
+  final ValueNotifier<String> fileDataBase64;
+  final Function pickImage;
+  final Function pickFile;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: !isLoading.value
+          ? () {
+              showModalBottomSheet(
+                context: context,
+                builder: (context) {
+                  return Container(
+                    height: Constant.getActualYPhone(context: context, y: 200),
+                    padding: EdgeInsets.all(20),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceAround,
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      children: [
+                        // Column(
+                        //   children: [
+                        // IconButton(
+                        //     onPressed: () {
+                        //       Navigator.pop(context);
+                        //       pickFile();
+                        //     },
+                        //     icon: Icon(
+                        //       Icons.folder_copy_rounded,
+                        //       size: 50,
+                        //       color: Constant.textOrange,
+                        //     )),
+                        // Text(
+                        //   "Browse a file",
+                        //   style: Constant.titleH2_400_12(context: context)
+                        //       .copyWith(
+                        //     fontWeight: FontWeight.w600,
+                        //     color: Constant.textBlack,
+                        //   ),
+                        // )
+                        //   ],
+                        // ),
+                        Column(
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          children: [
+                            IconButton(
+                              onPressed: () {
+                                Navigator.pop(context);
+                                pickImage();
+                              },
+                              icon: Icon(
+                                Icons.add_a_photo_rounded,
+                                size: 50,
+                                color: Constant.textOrange,
+                              ),
+                            ),
+                            SizedBox(
+                              height: Constant.getActualYPhone(
+                                  context: context, y: 10),
+                            ),
+                            Text(
+                              "Take a picture",
+                              style: Constant.titleH2_400_12(context: context)
+                                  .copyWith(
+                                fontWeight: FontWeight.w600,
+                                color: Constant.textBlack,
+                              ),
+                            )
+                          ],
+                        ),
+                      ],
+                    ),
+                  );
+                },
+              );
+            }
+          : null,
+      child: Stack(
+        alignment: AlignmentDirectional.topEnd,
+        children: [
+          Container(
+            width: Constant.getActualXPhone(context: context, x: 390),
+            height: Constant.getActualYPhone(
+                context: context, y: isImage.value ? 200 : 83),
+            decoration: BoxDecoration(
+              color: Constant.bgUploadFile,
+              borderRadius: BorderRadius.circular(8),
+            ),
+            child: Builder(builder: (context) {
+              final String? mime = lookupMimeType(fileData.value?.path ?? "");
+              return Semantics(
+                  label: 'image_picker_example_picked_image',
+                  child: (mime != null
+                      ? (mime.startsWith('image/'))
+                          ? Image.file(
+                              // image: AssetImage(photo.value!.path),
+                              File(fileData.value!.path),
+                              frameBuilder: (context, child, frame,
+                                  wasSynchronouslyLoaded) {
+                                return (wasSynchronouslyLoaded)
+                                    ? Center(
+                                        child: Text("Loadinga"),
+                                      )
+                                    : Container(
+                                        child: child,
+                                      );
+                              },
+                              errorBuilder: (BuildContext context, Object error,
+                                  StackTrace? stackTrace) {
+                                return const Center(
+                                    child: Text(
+                                        'This image type is not supported'));
+                              },
+                            )
+                          : Container(
+                              child: Column(
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                children: [
+                                  Icon(
+                                    Icons.file_present_rounded,
+                                    size: 40,
+                                    color: Constant.textOrange,
+                                  ),
+                                  Text(
+                                    fileData.value?.name ?? '',
+                                    style:
+                                        Constant.titleH2_400(context: context),
+                                  )
+                                ],
+                              ),
+                            )
+                      : Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          children: [
+                            // Icon(
+                            //   Icons.upload_outlined,
+                            //   color: Constant.textOrange,
+                            // ),
+
+                            Image.asset(
+                              'images/camera_selfie.png', // Path gambar untuk "Check In"
+                              width: Constant.getActualXPhone(
+                                  context: context, x: 24),
+                              height: Constant.getActualYPhone(
+                                  context: context, y: 24),
+                            ),
+                            SizedBox(
+                              height: Constant.getActualYPhone(
+                                context: context,
+                                y: 4,
+                              ),
+                            ),
+                            Text(
+                              'Upload File',
+                              style: Constant.titleH2_400_12(context: context)
+                                  .copyWith(
+                                      fontWeight: FontWeight.w600,
+                                      color: Constant.textOrange),
+                            )
+                          ],
+                        )));
+            }),
+          ),
+          if (fileData.value != null && !isLoading.value)
+            IconButton(
+                onPressed: () {
+                  fileData.value = null;
+                  fileDataBase64.value = '';
+                  isImage.value = false;
+                },
+                icon: Icon(Icons.cancel_outlined)),
+        ],
+      ),
+    );
+  }
+}

lib/widget/custom_dialog_presensi_selfie_sukses.dart

@@ -0,0 +1,119 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+import '../app/constant.dart';
+import '../app/route.dart';
+
+class CustomDialogPresensiSukses extends HookConsumerWidget {
+  final String messageStatus;
+  final String isiPesan;
+  final ValueNotifier<bool> isLoadingAddressUserLocation;
+
+  CustomDialogPresensiSukses({
+    required this.isLoadingAddressUserLocation,
+    required this.messageStatus,
+    required this.isiPesan,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Dialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8.0),
+      ),
+      elevation: 0,
+      backgroundColor: Colors.white,
+      child: contentBox(context),
+    );
+  }
+
+  Widget contentBox(BuildContext context) {
+    return Stack(
+      alignment: Alignment.center,
+      children: <Widget>[
+        Container(
+          padding: EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            shape: BoxShape.rectangle,
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              Padding(
+                padding: EdgeInsets.only(
+                  top: Constant.getActualYPhone(context: context, y: 24),
+                ),
+                child: Container(
+                  width: Constant.getActualXPhone(context: context, x: 100),
+                  height: Constant.getActualYPhone(context: context, y: 100),
+                  decoration: BoxDecoration(
+                    image: DecorationImage(
+                      image: AssetImage(
+                          'images/presensi_selfie_sukses.png'), // Ganti dengan path gambar Anda
+                    ),
+                  ),
+                ),
+              ),
+              SizedBox(
+                height: Constant.getActualYPhone(context: context, y: 36),
+              ),
+              Text(
+                messageStatus,
+                style: Constant.titleH1_700_18(context: context).copyWith(
+                  color: Constant.textOrange,
+                ),
+                textAlign: TextAlign.center,
+              ),
+              SizedBox(
+                height: Constant.getActualYPhone(context: context, y: 12),
+              ),
+              Text(
+                // 'Pengajuan presensi telah berhasil diajukan, mohon menunggu approval team leader!',
+                isiPesan,
+                style: Constant.titleH2_400_14(context: context).copyWith(
+                  color: Constant.textTrueBlack,
+                ),
+                textAlign: TextAlign.center,
+              ),
+              SizedBox(
+                height: Constant.getActualYPhone(context: context, y: 36),
+              ),
+              ElevatedButton(
+                onPressed: () {
+                  Navigator.of(context).pushNamedAndRemoveUntil(
+                    homeRoute,
+                    (route) => false,
+                  );
+                },
+                style: ButtonStyle(
+                  backgroundColor: MaterialStateColor.resolveWith(
+                      (st) => Constant.textOrange),
+                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                    RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(8),
+                      side: BorderSide(
+                        color: Constant.textOrange,
+                      ),
+                    ),
+                  ),
+                  shadowColor: MaterialStateProperty.all(Color(0xffff48423d)),
+                  elevation: MaterialStateProperty.all(4.0),
+                ),
+                child: Text(
+                  'OK',
+                  style: Constant.titleH2_400_14(context: context).copyWith(
+                    color: Constant.textWhite,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/widget/custom_drawer.dart

@@ -0,0 +1,216 @@
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+import '../app/constant.dart';
+import '../app/route.dart';
+import '../provider/current_menu_provider.dart';
+import '../provider/current_user_provider.dart';
+import '../provider/google_login_provider.dart';
+import '../screen/login/logout_provider.dart';
+
+class CustomDrawer extends HookConsumerWidget {
+  // final String userCompany;
+  const CustomDrawer({
+    Key? key,
+    // required this.userCompany,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedUser = ref.read(currentUserProvider);
+    final isLoading = useState(false);
+    final errorMessage = useState("");
+    final successMessage = useState("");
+    final M_CompanyName = useState("-");
+
+    // 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 () {};
+    // }, []);
+
+    ref.listen(logoutProvider, (prev, next) async {
+      if (next is LogoutStateLoading) {
+        isLoading.value = true;
+      } else if (next is LogoutStateError) {
+        isLoading.value = false;
+        errorMessage.value = next.message;
+        Timer(const Duration(seconds: 3), () {
+          errorMessage.value = "";
+        });
+      } else if (next is LogoutStateDone) {
+        isLoading.value = false;
+        final shared = await SharedPreferences.getInstance();
+        final bearerString = shared.get(Constant.bearerName).toString();
+        // print(bearerString);
+        if (bearerString.isNotEmpty) {
+          shared.remove(bearerString);
+          shared.clear();
+        }
+      }
+      final googleSignIn = ref.watch(googleSignInProvider);
+      if (await googleSignIn.isSignedIn()) {
+        await googleSignIn.disconnect();
+      }
+      SystemChannels.platform.invokeMethod('SystemNavigator.pop');
+    });
+
+    final currentMenu = ref.read(currentPageProvider);
+
+    return Container(
+      width: Constant.getActualXPhone(context: context, x: 300),
+      height: Constant.getActualYPhone(context: context, y: 844),
+      child: Drawer(
+        elevation: 0,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(
+            Radius.circular(0),
+          ),
+        ),
+        child: Column(
+          children: [
+            Expanded(
+              child: ListView(
+                children: [
+                  Padding(
+                    padding: EdgeInsets.only(
+                      top: Constant.getActualYPhone(context: context, y: 50),
+                      bottom: Constant.getActualYPhone(context: context, y: 10),
+                      right: Constant.getActualXPhone(context: context, x: 24),
+                      left: Constant.getActualXPhone(context: context, x: 24),
+                    ),
+                    child: Container(
+                      child: Image(
+                        fit: BoxFit.cover,
+                        image: AssetImage(
+                          'images/logo_sismedika_landscape.png',
+                        ),
+                      ),
+                    ),
+                  ),
+                  SizedBox(
+                    height: Constant.getActualYPhone(context: context, y: 8),
+                  ),
+                  Padding(
+                    padding: EdgeInsets.only(
+                      top: Constant.getActualYPhone(context: context, y: 10),
+                      bottom: Constant.getActualYPhone(context: context, y: 10),
+                      right: Constant.getActualXPhone(context: context, x: 24),
+                      left: Constant.getActualXPhone(context: context, x: 24),
+                    ),
+                    child: Container(
+                      width: Constant.getActualXPhone(context: context, x: 300),
+                    ),
+                  ),
+                  // Chip(
+                  //   backgroundColor: Constant.textLightGrey.withOpacity(0.16),
+                  //   label: Text(
+                  //     M_CompanyName.value,
+                  //     overflow: TextOverflow.ellipsis,
+                  //     style: TextStyle(
+                  //       color: Constant.textLightGrey,
+                  //     ),
+                  //   ),
+                  // ),
+                  ListTile(
+                    leading: Icon(
+                      Icons.home,
+                      color: (currentMenu == 0)
+                          ? Constant.textOrange
+                          : Constant.textLightGrey,
+                    ),
+                    title: Text(
+                      'Home',
+                      style: TextStyle(
+                        color: (currentMenu == 0)
+                            ? Constant.textOrange
+                            : Constant.textLightGrey,
+                      ),
+                    ),
+                    onTap: () {
+                      // Handle navigation to Home screen
+                      Navigator.pop(context);
+                      ref.read(currentPageProvider.state).update((state) => 0);
+                      Navigator.of(context).popAndPushNamed(homeRoute);
+                    },
+                  ),
+                  ListTile(
+                    leading: Icon(
+                      Icons.person,
+                      color: (currentMenu == 5)
+                          ? Constant.textOrange
+                          : Constant.textLightGrey,
+                    ),
+                    title: Text(
+                      'Profil',
+                      style: TextStyle(
+                        color: (currentMenu == 5)
+                            ? Constant.textOrange
+                            : Constant.textLightGrey,
+                      ),
+                    ),
+                    onTap: () {
+                      // Handle navigation to Home screen
+                      Navigator.pop(context);
+                      ref.read(currentPageProvider.state).update((state) => 5);
+                      // Navigator.of(context).popAndPushNamed(homeRoute);
+                    },
+                  ),
+                  ListTile(
+                    leading: Icon(
+                      Icons.logout,
+                      color: Constant.textLightGrey,
+                    ),
+                    title: Text(
+                      'Logout',
+                      style: TextStyle(color: Constant.textLightGrey),
+                    ),
+                    onTap: () {
+                      // di set ke 0 lagi
+                      ref.read(currentPageProvider.state).update((state) => 0);
+                      ref.read(logoutProvider.notifier).logout(
+                            email: selectedUser?.model.email ?? "",
+                            idGoogleSignIn:
+                                selectedUser?.model.idGoogleSignIn ?? "",
+                          );
+                    },
+                  ),
+                ],
+              ),
+            ),
+            // Versi Aplikasi
+            Padding(
+              padding: EdgeInsets.only(
+                right: Constant.getActualXPhone(context: context, x: 20),
+                bottom: Constant.getActualYPhone(context: context, y: 10),
+              ),
+              child: Align(
+                alignment: Alignment.bottomRight,
+                child: Text(
+                  'Versi ${Constant.version}',
+                  style: Constant.logintitle_700(context: context)
+                      .copyWith(color: Constant.textLightGrey),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widget/real_date.dart

@@ -0,0 +1,25 @@
+import 'dart:async';
+
+import 'package:absensi_sas/app/constant.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:intl/intl.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class RealTimeFormattedDate extends HookConsumerWidget {
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currentTime = useState<DateTime>(DateTime.now());
+
+    // Format waktu menjadi tanggal yang diinginkan
+    String formattedDate =
+        DateFormat('EEEE, d MMMM y', 'id_ID').format(currentTime.value);
+
+    // Tampilkan widget Text dengan tanggal yang diformat
+    return Text(
+      formattedDate,
+      style: Constant.date_600(context: context)
+          .copyWith(color: Constant.textBlack),
+    );
+  }
+}

lib/widget/real_time.dart

@@ -0,0 +1,39 @@
+import 'dart:async';
+
+import 'package:absensi_sas/app/constant.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:intl/intl.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class RealTimeClock extends HookConsumerWidget {
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    // Menggunakan useState untuk menyimpan waktu saat ini
+    final currentTime = useState<DateTime>(DateTime.now());
+    StreamSubscription<DateTime>? subscription;
+
+    useEffect(() {
+      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+        final clockStream = Stream<DateTime>.periodic(
+            Duration(seconds: 1), (i) => DateTime.now());
+        subscription = clockStream.listen((time) {
+          currentTime.value = time;
+        });
+      });
+      return () async {
+        subscription?.cancel();
+      };
+    }, []);
+
+    // Format waktu menjadi tanggal yang diinginkan
+    String formattedTime = DateFormat('HH:mm:ss').format(currentTime.value);
+
+    // Tampilkan widget Text dengan waktu yang diformat
+    return Text(
+      formattedTime,
+      style: Constant.time_700(context: context)
+          .copyWith(color: Constant.textBlack),
+    );
+  }
+}

lib/widget/sankbar_widget.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:top_snackbar_flutter/custom_snack_bar.dart';
+import 'package:top_snackbar_flutter/top_snack_bar.dart';
+
+enum snackbarType { error, info, success, warning }
+
+SanckbarWidget(BuildContext context, String msg, snackbarType tipe) {
+  switch (tipe) {
+    case snackbarType.error:
+      return showTopSnackBar(
+        Overlay.of(context),
+        CustomSnackBar.error(
+          message: msg,
+        ),
+      );
+      break;
+    case snackbarType.success:
+      return showTopSnackBar(
+        Overlay.of(context),
+        CustomSnackBar.success(
+          message: msg,
+        ),
+      );
+      break;
+    case snackbarType.info:
+      return showTopSnackBar(
+        Overlay.of(context),
+        CustomSnackBar.info(
+          message: msg,
+        ),
+      );
+      break;
+    case snackbarType.warning:
+      return showTopSnackBar(
+        Overlay.of(context),
+        CustomSnackBar.info(
+          backgroundColor: Colors.orangeAccent,
+          message: msg,
+        ),
+      );
+      break;
+    default:
+      return showTopSnackBar(
+        Overlay.of(context),
+        CustomSnackBar.info(
+          message: msg,
+        ),
+      );
+  }
+}

linux/flutter/generated_plugin_registrant.cc

@@ -6,6 +6,10 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <file_selector_linux/file_selector_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
+  g_autoptr(FlPluginRegistrar) file_selector_linux_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "FileSelectorPlugin");
+  file_selector_plugin_register_with_registrar(file_selector_linux_registrar);
 }

linux/flutter/generated_plugins.cmake

@@ -3,6 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+  file_selector_linux
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,10 +5,14 @@
 import FlutterMacOS
 import Foundation
 
+import file_selector_macos
 import geolocator_apple
+import path_provider_foundation
 import shared_preferences_foundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+  FileSelectorPlugin.register(with: registry.registrar(forPlugin: "FileSelectorPlugin"))
   GeolocatorPlugin.register(with: registry.registrar(forPlugin: "GeolocatorPlugin"))
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
 }

macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,68 +1,68 @@
 {
-  "images" : [
+    "info": {
-    {
+        "version": 1,
-      "size" : "16x16",
+        "author": "xcode"
-      "idiom" : "mac",
-      "filename" : "app_icon_16.png",
-      "scale" : "1x"
     },
-    {
+    "images": [
-      "size" : "16x16",
+        {
-      "idiom" : "mac",
+            "size": "16x16",
-      "filename" : "app_icon_32.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_16.png",
-    },
+            "scale": "1x"
-    {
+        },
-      "size" : "32x32",
+        {
-      "idiom" : "mac",
+            "size": "16x16",
-      "filename" : "app_icon_32.png",
+            "idiom": "mac",
-      "scale" : "1x"
+            "filename": "app_icon_32.png",
-    },
+            "scale": "2x"
-    {
+        },
-      "size" : "32x32",
+        {
-      "idiom" : "mac",
+            "size": "32x32",
-      "filename" : "app_icon_64.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_32.png",
-    },
+            "scale": "1x"
-    {
+        },
-      "size" : "128x128",
+        {
-      "idiom" : "mac",
+            "size": "32x32",
-      "filename" : "app_icon_128.png",
+            "idiom": "mac",
-      "scale" : "1x"
+            "filename": "app_icon_64.png",
-    },
+            "scale": "2x"
-    {
+        },
-      "size" : "128x128",
+        {
-      "idiom" : "mac",
+            "size": "128x128",
-      "filename" : "app_icon_256.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_128.png",
-    },
+            "scale": "1x"
-    {
+        },
-      "size" : "256x256",
+        {
-      "idiom" : "mac",
+            "size": "128x128",
-      "filename" : "app_icon_256.png",
+            "idiom": "mac",
-      "scale" : "1x"
+            "filename": "app_icon_256.png",
-    },
+            "scale": "2x"
-    {
+        },
-      "size" : "256x256",
+        {
-      "idiom" : "mac",
+            "size": "256x256",
-      "filename" : "app_icon_512.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_256.png",
-    },
+            "scale": "1x"
-    {
+        },
-      "size" : "512x512",
+        {
-      "idiom" : "mac",
+            "size": "256x256",
-      "filename" : "app_icon_512.png",
+            "idiom": "mac",
-      "scale" : "1x"
+            "filename": "app_icon_512.png",
-    },
+            "scale": "2x"
-    {
+        },
-      "size" : "512x512",
+        {
-      "idiom" : "mac",
+            "size": "512x512",
-      "filename" : "app_icon_1024.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_512.png",
-    }
+            "scale": "1x"
-  ],
+        },
-  "info" : {
+        {
-    "version" : 1,
+            "size": "512x512",
-    "author" : "xcode"
+            "idiom": "mac",
-  }
+            "filename": "app_icon_1024.png",
-}
+            "scale": "2x"
+        }
+    ]
+}