step 8 : add ui homescreen

lib/widget/real_date.dart

@@ -0,0 +1,25 @@
+import 'dart:async';
+
+import 'package:absensi_sas_flutter/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_flutter/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),
+    );
+  }
+}