diff --git a/images/btn_approval.png b/images/btn_approval.png
new file mode 100644
index 0000000..5120d10
Binary files /dev/null and b/images/btn_approval.png differ
diff --git a/lib/app/constant.dart b/lib/app/constant.dart
index da867fd..5657a7b 100644
--- a/lib/app/constant.dart
+++ b/lib/app/constant.dart
@@ -171,4 +171,47 @@ class Constant {
       fontFamily: 'Quicksand',
     );
   }
+
+  static TextStyle title_screen({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 24),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static TextStyle body_16({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 16),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static TextStyle body_14({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 14),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static TextStyle body_12({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 12),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans',
+    );
+  }
+
+  static Color primaryBlue = const Color(0xff0C53B7);
+  static Color bgBlue = const Color(0xff1890FF).withOpacity(0.16);
+  static Color primaryOrange = const Color(0xffF15A29);
+  static Color bgOrange = const Color(0xffF15A29).withOpacity(0.16);
+  static Color secondaryBlue = const Color(0xff43ADA5);
+  static Color bgSecondaryBlue = const Color(0xff43ADA5).withOpacity(0.16);
+  static Color primaryGreen = const Color(0xff229A16);
+  static Color bgGreen = const Color(0xff54D62C).withOpacity(0.08);
+  static Color primaryRed = const Color(0xffB72136);
+  static Color bgRed = const Color(0xffFF4842).withOpacity(0.08);
 }
diff --git a/lib/model/approval_detail_model.dart b/lib/model/approval_detail_model.dart
new file mode 100644
index 0000000..f6907a3
--- /dev/null
+++ b/lib/model/approval_detail_model.dart
@@ -0,0 +1,56 @@
+class ApprovalDetailModel {
+  String? id;
+  String? name;
+  String? nip;
+  String? date;
+  String? time;
+  String? address;
+  double? lat;
+  double? long;
+  String? imagePath;
+  String? statusID;
+  String? statusName;
+
+  ApprovalDetailModel(
+      {this.id,
+      this.name,
+      this.nip,
+      this.date,
+      this.time,
+      this.address,
+      this.lat,
+      this.long,
+      this.imagePath,
+      this.statusID,
+      this.statusName});
+
+  ApprovalDetailModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    name = json['Name'];
+    nip = json['nip'];
+    date = json['date'];
+    time = json['time'];
+    address = json['address'];
+    lat = json['lat'];
+    long = json['long'];
+    imagePath = json['imagePath'];
+    statusID = json['statusID'];
+    statusName = json['statusName'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['id'] = this.id;
+    data['Name'] = this.name;
+    data['nip'] = this.nip;
+    data['date'] = this.date;
+    data['time'] = this.time;
+    data['address'] = this.address;
+    data['lat'] = this.lat;
+    data['long'] = this.long;
+    data['imagePath'] = this.imagePath;
+    data['statusID'] = this.statusID;
+    data['statusName'] = this.statusName;
+    return data;
+  }
+}
diff --git a/lib/model/approval_model.dart b/lib/model/approval_model.dart
new file mode 100644
index 0000000..c01bbfc
--- /dev/null
+++ b/lib/model/approval_model.dart
@@ -0,0 +1,68 @@
+class ApprovalModel {
+  String? id;
+  String? name;
+  String? date;
+  String? time;
+  String? typename;
+  String? typeID;
+  String? presensiTypeName;
+  String? presensitypeID;
+  String? address;
+  String? reasonType;
+  String? reasontypeID;
+  String? reasonDescription;
+  String? statusID;
+  String? statusName;
+
+  ApprovalModel(
+      {this.id,
+      this.name,
+      this.date,
+      this.time,
+      this.typename,
+      this.typeID,
+      this.presensiTypeName,
+      this.presensitypeID,
+      this.address,
+      this.reasonType,
+      this.reasontypeID,
+      this.reasonDescription,
+      this.statusID,
+      this.statusName});
+
+  ApprovalModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    name = json['name'];
+    date = json['date'];
+    time = json['time'];
+    typename = json['typename'];
+    typeID = json['typeID'];
+    presensiTypeName = json['presensiTypeName'];
+    presensitypeID = json['presensitypeID'];
+    address = json['address'];
+    reasonType = json['reasonType'];
+    reasontypeID = json['reasontypeID'];
+    reasonDescription = json['reasonDescription'];
+    statusID = json['statusID'];
+    statusName = json['statusName'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['id'] = this.id;
+    data['name'] = this.name;
+    data['date'] = this.date;
+    data['time'] = this.time;
+    data['typename'] = this.typename;
+    data['typeID'] = this.typeID;
+    data['presensiTypeName'] = this.presensiTypeName;
+    data['presensitypeID'] = this.presensitypeID;
+    data['address'] = this.address;
+    data['reasonType'] = this.reasonType;
+    data['reasontypeID'] = this.reasontypeID;
+    data['reasonDescription'] = this.reasonDescription;
+    data['statusID'] = this.statusID;
+    data['statusName'] = this.statusName;
+    return data;
+  }
+}
diff --git a/lib/model/approval_type_model.dart b/lib/model/approval_type_model.dart
new file mode 100644
index 0000000..bdd8366
--- /dev/null
+++ b/lib/model/approval_type_model.dart
@@ -0,0 +1,24 @@
+class ApprovalTypeModel {
+  String? id;
+  String? value;
+  String? name;
+  bool? isActive;
+
+  ApprovalTypeModel({this.id, this.value, this.name, this.isActive});
+
+  ApprovalTypeModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    value = json['value'];
+    name = json['name'];
+    isActive = json['isActive'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['id'] = this.id;
+    data['value'] = this.value;
+    data['name'] = this.name;
+    data['isActive'] = this.isActive;
+    return data;
+  }
+}
diff --git a/lib/provider/approval_filter_provider.dart b/lib/provider/approval_filter_provider.dart
new file mode 100644
index 0000000..d767f7e
--- /dev/null
+++ b/lib/provider/approval_filter_provider.dart
@@ -0,0 +1,28 @@
+import 'package:absensi_sas/model/approval_type_model.dart';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class ApprovalFilterProvider {
+  DateTime startDate = DateTime.now();
+  DateTime endDate = DateTime.now();
+  String keyword = "";
+  List<String> selectedApprovalType = [];
+  final approvalTypeList = [
+    ApprovalTypeModel(id: "1", name: "Presensi", isActive: false, value: "p"),
+    ApprovalTypeModel(id: "2", name: "Cuti", isActive: true, value: "c"),
+    ApprovalTypeModel(id: "3", name: "Lembur", isActive: false, value: "l"),
+  ];
+  ApprovalFilterProvider(
+      {required this.endDate,
+      required this.keyword,
+      required this.selectedApprovalType,
+      required this.startDate});
+}
+
+final approvalFilterProvider = StateProvider<ApprovalFilterProvider>((ref) {
+  return ApprovalFilterProvider(
+      selectedApprovalType: [],
+      endDate: DateTime.now(),
+      keyword: "",
+      startDate: DateTime.now());
+});