Updated pages

lib/pages/index_page.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
-import 'package:ocbo_esign_validator/widgets/circle_widget.dart';
+import 'package:ocbo_esign_validator/widgets/menu_widget.dart';
 import 'package:ocbo_esign_validator/widgets/image_widget.dart';
 import 'package:ocbo_esign_validator/widgets/text_widget.dart';
 
@@ -11,7 +11,7 @@ class IndexPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     void gotoApproval() {
-      context.push('/approval');
+      context.push('/login');
     }
 
     void gotoValidation() {
@@ -20,43 +20,72 @@ class IndexPage extends StatelessWidget {
 
     return Scaffold(
       resizeToAvoidBottomInset: false,
-      body: Container(
+      body: LayoutBuilder(
-        alignment: Alignment.center,
+        builder: (context, constraints) {
-        height: MediaQuery.of(context).size.height,
+          final screenWidth = constraints.maxWidth;
-        decoration: const BoxDecoration(color: Color.fromRGBO(21, 31, 42, 1)),
+
-        child: Center(
+          return Container(
-          child: Column(
+            alignment: Alignment.center,
-            children: [
+            height: MediaQuery.of(context).size.height,
-              const Gap(88),
+            decoration: const BoxDecoration(
-              const ImageWidget(imagePath: 'assets/logo.png', size: 140, measureByHeight: true),
+              gradient: LinearGradient(
-              const Gap(20),
+                begin: Alignment.topCenter,
-              const TextWidget(text: "OCBO e-Sign", color: Color.fromARGB(255, 244, 243, 243), bold: true, size: 32),
+                end: Alignment.bottomCenter,
-              const Gap(2),
+                colors: [
-              const TextWidget(text: "Mobile", color: Color.fromARGB(255, 244, 243, 243), bold: true),
+                  Color.fromRGBO(39, 26, 47, 1),
-              const Gap(200),
+                  Color.fromRGBO(22, 33, 44, 1),
-              Row(
+                  Color.fromRGBO(22, 33, 44, 1),
-                mainAxisAlignment: MainAxisAlignment.center,
+                  Color.fromRGBO(24, 45, 40, 1),
-                spacing: 32,
+                ],
-                children: <Widget>[
+              ),
-                  CircleWidget(
+            ),
-                    icon: Icons.thumb_up,
+            child: Center(
-                    text: 'Approval',
+              child: Column(
-                    onPressed: () {
+                children: [
-                      gotoApproval();
+                  const Gap(88),
-                    },
+                  const ImageWidget(imagePath: 'assets/logo.png', size: 140, measureByHeight: true),
+                  const Gap(24),
+                  const TextWidget(
+                    text: "OCBO e-Sign",
+                    color: Color.fromARGB(255, 244, 243, 243),
+                    bold: true,
+                    size: 34,
                   ),
-                  CircleWidget(
+                  Padding(
-                    icon: Icons.qr_code,
+                    padding: EdgeInsets.only(right: (screenWidth / 2) - 100),
-                    text: 'Validate',
+                    child: Row(
-                    onPressed: () {
+                      mainAxisAlignment: MainAxisAlignment.end,
-                      gotoValidation();
+                      children: [
-                    },
+                        TextWidget(text: "Mobile", color: Color.fromARGB(255, 244, 243, 243), bold: false, size: 16),
+                      ],
+                    ),
+                  ),
+                  Gap(200),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    spacing: 32,
+                    children: <Widget>[
+                      MenuWidget(
+                        icon: Icons.person,
+                        text: 'Login',
+                        onPressed: () {
+                          gotoApproval();
+                        },
+                      ),
+                      MenuWidget(
+                        icon: Icons.qr_code,
+                        text: 'Validate',
+                        onPressed: () {
+                          gotoValidation();
+                        },
+                      ),
+                    ],
                   ),
                 ],
               ),
-            ],
+            ),
-          ),
+          );
-        ),
+        },
       ),
     );
   }

lib/pages/login_page.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:ocbo_esign_validator/widgets/box_widget.dart';
+import 'package:ocbo_esign_validator/widgets/button_widget.dart';
+import 'package:ocbo_esign_validator/widgets/image_widget.dart';
+import 'package:ocbo_esign_validator/widgets/input_widget.dart';
+import 'package:ocbo_esign_validator/widgets/text_widget.dart';
+
+class LoginPage extends StatefulWidget {
+  const LoginPage({super.key});
+
+  @override
+  State<LoginPage> createState() => _LoginPageState();
+}
+
+class _LoginPageState extends State<LoginPage> {
+  //  final List _ =;
+  // ["Cluj-Napoca", "Bucuresti", "Timisoara", "Brasov", "Constanta"];
+
+  final _passwordController = TextEditingController();
+  final _approver = "ARCH. KHASHAYAR L. TOGHYANI";
+
+  void _login() {
+    // Add your login logic here
+    print("Login button clicked");
+  }
+
+  @override
+  void dispose() {
+    _passwordController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      body: Container(
+        alignment: Alignment.center,
+        height: MediaQuery.of(context).size.height,
+        decoration: const BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [
+              Color.fromRGBO(39, 26, 47, 1),
+              Color.fromRGBO(22, 33, 44, 1),
+              Color.fromRGBO(22, 33, 44, 1),
+              Color.fromRGBO(24, 45, 40, 1),
+            ],
+          ),
+        ),
+        child: Column(
+          children: [
+            const Gap(88),
+            const ImageWidget(imagePath: 'assets/logo.png', size: 100, measureByHeight: true),
+            const Gap(50),
+            BoxWidget(
+              title: 'Login',
+              content: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const TextWidget(text: 'Name', bold: true, size: 16),
+                  const Gap(8),
+                  TextWidget(text: _approver, bold: false, size: 16),
+                  const Gap(8),
+                  const TextWidget(text: 'Password', bold: true, size: 16),
+                  const Gap(8),
+                  InputWidget(controller: _passwordController, placeholder: 'placeholder'),
+                  const Gap(16),
+                  ButtonWidget(text: 'Login', onPressed: _login),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/validate_page.dart

@@ -1,10 +1,129 @@
 import 'package:flutter/material.dart';
+import 'package:mobile_scanner/mobile_scanner.dart';
+import 'package:ocbo_esign_validator/widgets/text_widget.dart';
 
 class ValidatePage extends StatelessWidget {
   const ValidatePage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold();
+    return const MaterialApp(debugShowCheckedModeBanner: false, home: BarcodeScannerScreen());
   }
 }
+
+class BarcodeScannerScreen extends StatefulWidget {
+  const BarcodeScannerScreen({super.key});
+
+  @override
+  State<BarcodeScannerScreen> createState() => _BarcodeScannerScreenState();
+}
+
+class _BarcodeScannerScreenState extends State<BarcodeScannerScreen> {
+  String barcodeResult = "Point the camera at a barcode";
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      body: Container(
+        alignment: Alignment.center,
+        height: MediaQuery.of(context).size.height,
+        decoration: const BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [
+              Color.fromRGBO(39, 26, 47, 1),
+              Color.fromRGBO(22, 33, 44, 1),
+              Color.fromRGBO(22, 33, 44, 1),
+              Color.fromRGBO(24, 45, 40, 1),
+            ],
+          ),
+        ),
+        child: Center(
+          child: Column(
+            children: [
+              Expanded(
+                flex: 3,
+                child: MobileScanner(
+                  onDetect: (BarcodeCapture capture) {
+                    final List<Barcode> barcodes = capture.barcodes;
+                    if (barcodes.isNotEmpty && barcodes.first.rawValue != null) {
+                      setState(() {
+                        barcodeResult = barcodes.first.rawValue!;
+                      });
+                    }
+                  },
+                ),
+              ),
+              Expanded(
+                flex: 1,
+                child: Center(
+                  child: Center(child: TextWidget(text: barcodeResult, bold: false, size: 18)),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// class ValidatePage extends StatefulWidget {
+//   const ValidatePage({super.key});
+
+//   @override
+//   State<ValidatePage> createState() => _ValidatePageState();
+// }
+
+// class _ValidatePageState extends State<ValidatePage> {
+//   final qrKey = GlobalKey(debugLabel: 'QR');
+//   String barcodeResult = "Point the camera at a barcode";
+
+//   @override
+//   Widget build(BuildContext context) {
+//     return Scaffold(
+//       resizeToAvoidBottomInset: false,
+//       body: Container(
+//         alignment: Alignment.center,
+//         height: MediaQuery.of(context).size.height,
+//         decoration: const BoxDecoration(
+//           gradient: LinearGradient(
+//             begin: Alignment.topCenter,
+//             end: Alignment.bottomCenter,
+//             colors: [
+//               Color.fromRGBO(39, 26, 47, 1),
+//               Color.fromRGBO(22, 33, 44, 1),
+//               Color.fromRGBO(22, 33, 44, 1),
+//               Color.fromRGBO(24, 45, 40, 1),
+//             ],
+//           ),
+//         ),
+//         child: Center(
+//           child: Column(
+//             children: [
+//               Expanded(
+//                 flex: 2,
+//                 child: MobileScanner(
+//                   onDetect: (BarcodeCapture capture) {
+//                     final List<Barcode> barcodes = capture.barcodes;
+//                     if (barcodes.isNotEmpty && barcodes.first.rawValue != null) {
+//                       setState(() {
+//                         barcodeResult = barcodes.first.rawValue!;
+//                       });
+//                     }
+//                   },
+//                 ),
+//               ),
+//               Expanded(
+//                 flex: 1,
+//                 child: Center(child: TextWidget(text: barcodeResult, bold: false, size: 18)),
+//               ),
+//             ],
+//           ),
+//         ),
+//       ),
+//     );
+//   }
+// }

lib/pages/validation_result_page.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class ValidationResultPage extends StatelessWidget {
+  const ValidationResultPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold();
+  }
+}