Merge pull request #4 from impfundev/development

Development

Merge pull request #4 from impfundev/development
Development
7bcbe2db · Ilham Maulana Pratama · GitHub · 6d383880 · a80e1707 · 7bcbe2db
Unverified Commit 7bcbe2db authored Aug 07, 2024 by Ilham Maulana Pratama Committed by GitHub Aug 07, 2024
19 changed files
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -3,6 +3,7 @@ import 'package:flutter/gestures.dart';
 import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:library_app/src/screens/profile_edit_screen.dart';
 import 'package:provider/provider.dart';
 import 'package:library_app/src/providers/auth_provider.dart';
 import 'package:library_app/src/providers/navigations_provider.dart';
@@ -54,7 +55,11 @@ class _LibraryApp extends State<LibraryApp> {
        GoRoute(
          path: "/change-password",
          builder: (context, state) => const ChangePasswordScreen(),
-        )
+        ),
+        GoRoute(
+          path: "/profile-edit",
+          builder: (context, state) => const ProfileEditScreen(),
+        ),
      ],
    );

--- a/lib/src/models/loan.dart
+++ b/lib/src/models/loan.dart
@@ -17,16 +17,4 @@ class Loan {
    this.remainingDays,
    this.isOverdue,
  );
-  factory Loan.fromJson(Map<String, dynamic> data) {
-    final book = Book.fromJson(data["book_detail"]);
-    return Loan(
-      book,
-      null,
-      data["loan_date"],
-      data["due_date"],
-      data["remaining_loan_time"],
-      data["is_overdue"],
-    );
-  }
 }
--- a/lib/src/models/user.dart
+++ b/lib/src/models/user.dart
 class User {
  int id;
-  int accountId;
  String username;
  String email;
  String? firstName;
  String? lastName;
  bool isStaff;
-  User(this.id, this.accountId, this.username, this.email, this.firstName,
+  User(this.id, this.username, this.email, this.firstName, this.lastName,
-      this.lastName, this.isStaff);
+      this.isStaff);
  factory User.fromJson(Map<String, dynamic> data) {
    return User(
      data['id'] as int,
-      data['account_id'] as int,
      data['username'] as String,
      data['email'] as String,
      data['first_name'] as String?,
@@ -36,7 +34,6 @@ class User {
 final User initialUser = User(
  1,
-  2,
  "test_user",
  "test@email.com",
  "Test",

--- a/lib/src/providers/auth_provider.dart
+++ b/lib/src/providers/auth_provider.dart
@@ -10,7 +10,9 @@ import 'package:library_app/src/models/user.dart';
 class AuthProvider with ChangeNotifier {
  final storage = const FlutterSecureStorage();
  String baseUrl = 'http://localhost:8000/api/v1';
+  String? message;
  User? user;
  bool isAuthenticated = false;
@@ -26,6 +28,11 @@ class AuthProvider with ChangeNotifier {
  bool changePasswordSucced = false;
  bool loanBookSuccess = false;
+  bool hasNextPage = false;
+  bool hasPrevPage = false;
+  int pageNumber = 1;
+  int? totalPages;
  List<dynamic>? loans;
  List<dynamic>? nearOutstandingLoans;
  List<dynamic>? overduedLoans;
@@ -47,6 +54,37 @@ class AuthProvider with ChangeNotifier {
    loanBookSuccess = value;
  }
+  void setInvalidUsernameOrPassword(bool value) {
+    invalidUsernameOrPassword = value;
+  }
+  void resetAllState() {
+    user = null;
+    message = null;
+    memberLoans = null;
+    loans = null;
+    nearOutstandingLoans = null;
+    overduedLoans = null;
+    totalPages = null;
+    isAuthenticated = false;
+    invalidUsernameOrPassword = false;
+    filterByUpcoming = false;
+    filterByOverdued = false;
+    isLoading = false;
+    resetPasswordTokenSended = false;
+    resetPasswordSucced = false;
+    changePasswordSucced = false;
+    loanBookSuccess = false;
+    hasNextPage = false;
+    hasPrevPage = false;
+  }
+  void setPage(int value) {
+    pageNumber = value;
+    notifyListeners();
+  }
  Future<void> signIn(
      BuildContext context, String username, String password) async {
    try {
@@ -57,22 +95,20 @@ class AuthProvider with ChangeNotifier {
        headers: {'Content-Type': 'application/json'},
      );
-      if (response.statusCode == 200) {
+      if (response.statusCode == 201) {
        final data = jsonDecode(response.body);
        String token = Token.fromJson(data)!.key;
        await storeAccessToken(token);
        isAuthenticated = true;
-        invalidUsernameOrPassword = false;
+        setInvalidUsernameOrPassword(false);
        debugPrint("Login successful $token");
-      } else if (response.statusCode == 401) {
+      } else if (response.statusCode == 400) {
-        invalidUsernameOrPassword = true;
+        setInvalidUsernameOrPassword(true);
        debugPrint("Login failed: ${response.statusCode} ${response.body}");
      } else {
-        final code = response.statusCode;
+        debugPrint("Login failed: ${response.statusCode} ${response.body}");
-        debugPrint("Login failed $code");
      }
      setLoading(false);
@@ -98,19 +134,7 @@ class AuthProvider with ChangeNotifier {
      if (response.statusCode == 200) {
        await storage.delete(key: 'token');
-        isAuthenticated = false;
+        resetAllState();
-        user = null;
-        filterByUpcoming = false;
-        filterByOverdued = false;
-        memberLoans = null;
-        isLoading = false;
-        resetPasswordTokenSended = false;
-        resetPasswordSucced = false;
-        loans = null;
-        nearOutstandingLoans = null;
-        overduedLoans = null;
      } else {
        debugPrint("Logout failed: ${response.statusCode} ${response.body}");
      }
@@ -132,22 +156,25 @@ class AuthProvider with ChangeNotifier {
        "password": password,
      };
      final response = await http.post(
-        Uri.parse('$baseUrl/members/auth/register'),
+        Uri.parse('$baseUrl/auth/register'),
        body: jsonEncode(body),
        headers: {'Content-Type': 'application/json'},
      );
-      if (response.statusCode == 200) {
+      if (response.statusCode == 201) {
        final data = jsonDecode(response.body);
        String token = Token.fromJson(data)!.key;
        storeAccessToken(token);
        isAuthenticated = true;
+        message = null;
        if (context.mounted) {
          context.go("/");
        }
        debugPrint("Signup successful $token");
      } else {
+        final data = jsonDecode(response.body);
+        message = data["message"];
        debugPrint(
            "Error: sign up failed, ${response.statusCode}: ${response.body}");
      }
@@ -169,15 +196,17 @@ class AuthProvider with ChangeNotifier {
          Uri.parse('$baseUrl/user'),
          headers: {
            'Content-Type': 'application/json',
-            'Authorization': 'Bearer $token'
+            'Authorization': 'Bearer $token',
          },
        );
        if (response.statusCode == 200) {
          final data = jsonDecode(response.body);
          user = User.fromJson(data);
+          message = null;
        } else {
-          debugPrint('Error fetching user details: ${response.statusCode}');
+          debugPrint(
+              'Error fetching user details: ${response.statusCode} ${response.body}');
        }
        setLoading(false);
@@ -189,6 +218,7 @@ class AuthProvider with ChangeNotifier {
  }
  Future<void> updateUserDetail(
+    BuildContext context,
    int id,
    String username,
    String email,
@@ -201,14 +231,15 @@ class AuthProvider with ChangeNotifier {
    if (token != null) {
      try {
-        final body = jsonEncode({
+        final data = {
          "username": username,
          "email": email,
          "first_name": firstName,
          "last_name": lastName,
-        });
+        };
+        final body = jsonEncode(data);
        final response = await http.put(
-          Uri.parse('$baseUrl/user/$id/'),
+          Uri.parse('$baseUrl/user/update'),
          body: body,
          headers: {
            'Content-Type': 'application/json',
@@ -217,9 +248,14 @@ class AuthProvider with ChangeNotifier {
        );
        if (response.statusCode == 200) {
-          final data = jsonDecode(response.body);
+          await getUserDetail();
-          user = User.fromJson(data);
+          message = null;
+          if (context.mounted) {
+            context.pop();
+          }
        } else {
+          final data = jsonDecode(response.body);
+          message = data["message"];
          debugPrint(
              'Error update user details: ${response.statusCode}, ${response.body}');
        }
@@ -234,19 +270,20 @@ class AuthProvider with ChangeNotifier {
  Future<void> changePassword(
    BuildContext context,
-    int accountId,
    String oldPassword,
-    String newPassword,
+    String newPassword1,
+    String newPassword2,
  ) async {
    final token = await getAccessToken();
    try {
      setLoading(true);
-      final response = await http.post(
+      final response = await http.put(
-        Uri.parse('$baseUrl/members/$accountId/change-password'),
+        Uri.parse('$baseUrl/auth/change-password'),
        body: jsonEncode({
          "old_password": oldPassword,
-          "new_password": newPassword,
+          "new_password1": newPassword1,
+          "new_password2": newPassword2,
        }),
        headers: {
          'Content-Type': 'application/json',
@@ -255,11 +292,14 @@ class AuthProvider with ChangeNotifier {
      );
      if (response.statusCode == 200) {
+        message = null;
        if (context.mounted) {
          context.go("/");
        }
        changePasswordSucced = true;
      } else {
+        final data = jsonDecode(response.body);
+        message = data["message"];
        debugPrint(
            'Change password failed: ${response.statusCode}, ${response.body}');
      }
@@ -271,18 +311,24 @@ class AuthProvider with ChangeNotifier {
    }
  }
-  Future<void> resetPassword(String email) async {
+  Future<void> resetPassword(BuildContext context, String email) async {
    try {
      setLoading(true);
      final response = await http.post(
-        Uri.parse('$baseUrl/reset-password/request-token'),
+        Uri.parse('$baseUrl/auth/reset-password'),
        body: jsonEncode({"email": email}),
        headers: {'Content-Type': 'application/json'},
      );
      if (response.statusCode == 200) {
+        message = null;
        resetPasswordTokenSended = true;
+        if (context.mounted) {
+          context.go("/confirm-reset-password");
+        }
      } else {
+        final data = jsonDecode(response.body);
+        message = data["message"];
        debugPrint(
            'Error reset user password: ${response.statusCode}, ${response.body}');
      }
@@ -295,7 +341,11 @@ class AuthProvider with ChangeNotifier {
  }
  Future<void> confirmResetPassword(
-      int pin, String password1, String password2) async {
+    BuildContext context,
+    int pin,
+    String password1,
+    String password2,
+  ) async {
    setLoading(true);
    final body = jsonEncode({
      "pin": pin,
@@ -305,14 +355,20 @@ class AuthProvider with ChangeNotifier {
    try {
      final response = await http.post(
-        Uri.parse('$baseUrl/reset-password/confirm'),
+        Uri.parse('$baseUrl/auth/reset-password-confirm'),
        body: body,
        headers: {'Content-Type': 'application/json'},
      );
      if (response.statusCode == 200) {
+        message = null;
        resetPasswordSucced = true;
+        if (context.mounted) {
+          context.go("/");
+        }
      } else {
+        final data = jsonDecode(response.body);
+        message = data["message"];
        debugPrint(
            'Error confirm reset user password: ${response.statusCode}, ${response.body}');
      }
@@ -328,13 +384,13 @@ class AuthProvider with ChangeNotifier {
    setLoading(true);
    final token = await getAccessToken();
-    String url = '$baseUrl/members/${user?.accountId}/loans/';
+    String url = '$baseUrl/user/loans';
    if (filterByUpcoming) {
      url += '?near_outstanding=True';
    } else if (filterByOverdued) {
      url += '?overdue=True';
-    } else {
+    } else if (pageNumber > 1) {
-      null;
+      url += "?page=$pageNumber";
    }
    try {
@@ -347,9 +403,16 @@ class AuthProvider with ChangeNotifier {
      );
      if (response.statusCode == 200) {
+        message = null;
        final data = jsonDecode(response.body);
-        memberLoans = data["results"];
+        memberLoans = data["data"];
+        hasNextPage = data["has_next"];
+        hasPrevPage = data["has_prev"];
+        pageNumber = data["page_number"];
+        totalPages = data["total_pages"];
      } else {
+        final data = jsonDecode(response.body);
+        message = data["message"];
        debugPrint(
            "Failed to get member loan. ${response.statusCode}: ${response.body}");
      }
@@ -377,6 +440,7 @@ class AuthProvider with ChangeNotifier {
  Future<void> createMemberLoan(int memberId, int bookId, int loanDay) async {
    final token = await getAccessToken();
+    String url = '$baseUrl/user/loans';
    final now = DateTime.now();
    final dueDate = now.add(Duration(days: loanDay));
@@ -390,7 +454,7 @@ class AuthProvider with ChangeNotifier {
    try {
      setLoading(true);
      final response = await http.post(
-        Uri.parse('$baseUrl/members/$memberId/loans/'),
+        Uri.parse(url),
        body: jsonEncode(body),
        headers: {
          'Content-Type': 'application/json',
@@ -399,31 +463,33 @@ class AuthProvider with ChangeNotifier {
      );
      if (response.statusCode == 200) {
-        final data = jsonDecode(response.body);
+        message = null;
-        memberLoans = data["results"];
+        await getMemberLoan();
      } else {
+        final data = jsonDecode(response.body);
+        message = data["message"];
        debugPrint(
-            "Failed to create member loan. ${response.statusCode}: ${response.body}");
+            "Failed to add member loan. ${response.statusCode}: ${response.body}");
      }
      loanBookSuccess = true;
      setLoading(false);
      notifyListeners();
    } catch (error) {
-      debugPrint("Failed to create member loan. $error");
+      debugPrint("Failed to add member loan. $error");
    }
  }
  // for admin or librarian
  Future<void> getLoans(String? type) async {
    final token = await storage.read(key: 'access_token');
-    String url = baseUrl;
+    String url = "$baseUrl/book-loans";
    if (type == "upcoming") {
-      url += "/upcoming-loans/";
+      url += '?near_outstanding=True';
    } else if (type == "overdue") {
-      url += "/overdued-loans/";
+      url += '?overdue=True';
-    } else {
+    } else if (pageNumber > 1) {
-      url += "/book-loans/";
+      url += "?page=$pageNumber";
    }
    if (token != null) {
@@ -440,12 +506,16 @@ class AuthProvider with ChangeNotifier {
        if (response.statusCode == 200) {
          final data = jsonDecode(response.body);
          if (type == "upcoming") {
-            nearOutstandingLoans = data["results"];
+            nearOutstandingLoans = data["data"];
          } else if (type == "overdue") {
-            overduedLoans = data["results"];
+            overduedLoans = data["data"];
          } else {
-            loans = data["results"];
+            loans = data["data"];
          }
+          hasNextPage = data["has_next"];
+          hasPrevPage = data["has_prev"];
+          pageNumber = data["page_number"];
+          totalPages = data["total_pages"];
        } else {
          final code = response.statusCode;
          debugPrint("Error: Fetch upcoming loans failed, $code");

--- a/lib/src/providers/book_provider.dart
+++ b/lib/src/providers/book_provider.dart
@@ -12,6 +12,11 @@ class BookProvider with ChangeNotifier {
  String? searchKeyword;
  String? filterByCategory;
+  bool hasNextPage = false;
+  bool hasPrevPage = false;
+  int pageNumber = 1;
+  int? totalPages;
  bool isLoading = false;
  void setLoading(bool value) {
@@ -23,9 +28,11 @@ class BookProvider with ChangeNotifier {
      setLoading(true);
      String url = '$baseUrl/books';
      if (filterByCategory != null) {
-        url += '?category__name=$filterByCategory';
+        url += '?category=$filterByCategory';
      } else if (searchKeyword != null) {
        url += "?search=$searchKeyword";
+      } else if (pageNumber > 1) {
+        url += "?page=$pageNumber";
      }
      final response = await http.get(
@@ -35,7 +42,11 @@ class BookProvider with ChangeNotifier {
      if (response.statusCode == 200) {
        final data = jsonDecode(response.body);
-        books = data["results"];
+        books = data["data"];
+        hasNextPage = data["has_next"];
+        hasPrevPage = data["has_prev"];
+        pageNumber = data["page_number"];
+        totalPages = data["total_pages"];
      } else {
        final code = response.statusCode;
        debugPrint("Error: Fetch books failed, $code");
@@ -58,8 +69,14 @@ class BookProvider with ChangeNotifier {
    notifyListeners();
  }
+  void setPage(int value) {
+    pageNumber = value;
+    notifyListeners();
+  }
  Future<void> getCategories() async {
    try {
+      setLoading(true);
      final response = await http.get(
        Uri.parse('$baseUrl/categories'),
        headers: {'Content-Type': 'application/json'},
@@ -67,11 +84,12 @@ class BookProvider with ChangeNotifier {
      if (response.statusCode == 200) {
        final data = jsonDecode(response.body);
-        categories = data["results"];
+        categories = data;
      } else {
        debugPrint("Error: Fetch books failed, ${response.statusCode}");
      }
+      setLoading(false);
      notifyListeners();
    } catch (error) {
      debugPrint("Error: Fetch books failed, $error");

--- a/lib/src/screens/form_screen.dart
+++ b/lib/src/screens/form_screen.dart
@@ -41,7 +41,9 @@ class _FormScreen extends State<FormScreen> {
        title: Text(title),
        leading: withBack
            ? BackButton(
-                onPressed: () => context.push(backRoute ?? ""),
+                onPressed: () => backRoute != null
+                    ? context.push(backRoute!)
+                    : context.pop(),
              )
            : null,
        actions: action,
@@ -99,7 +101,7 @@ class ChangePasswordScreen extends StatelessWidget {
    return FormScreen(
      title: title,
-      backRoute: "/",
+      backRoute: null,
      body: const ChangePasswordForm(),
    );
  }

--- a/lib/src/screens/list/list_screen.dart
+++ b/lib/src/screens/list/list_screen.dart
 import 'package:flutter/material.dart';
 import 'package:library_app/src/providers/auth_provider.dart';
+import 'package:library_app/src/providers/navigations_provider.dart';
 import 'package:library_app/src/screens/list/admin_list_screen.dart';
 import 'package:library_app/src/screens/list/member_list_screen.dart';
 import 'package:provider/provider.dart';
@@ -12,6 +13,17 @@ class ListScreen extends StatefulWidget {
 }
 class _ListScreen extends State<ListScreen> {
+  @override
+  void initState() {
+    Future.delayed(
+      Duration.zero,
+      () {
+        Provider.of<NavigationsProvider>(context, listen: false).navigate(0);
+      },
+    );
+    super.initState();
+  }
  @override
  Widget build(BuildContext context) {
    final user = Provider.of<AuthProvider>(context).user;

--- a/lib/src/screens/list/member_list_screen.dart
+++ b/lib/src/screens/list/member_list_screen.dart
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:library_app/src/models/category.dart';
 import 'package:library_app/src/providers/auth_provider.dart';
 import 'package:library_app/src/providers/book_provider.dart';
@@ -73,31 +74,53 @@ class _MemberListScreen extends State<MemberListScreen> {
            const BookList(),
            // Loans
            LoanList(
-              memberId: authProvider.user?.accountId ?? 0,
+              memberId: authProvider.user?.id ?? 0,
            ),
            // Profile
            const Profile(),
          ][navProvider.currentPageIndex],
          drawer: Drawer(
-            child: ListView(
+            child: Column(
-              padding: EdgeInsets.zero,
+              children: [
-              children: List.generate(
+                Padding(
-                category != null ? category.length : 0,
+                  padding: const EdgeInsets.symmetric(
-                (index) {
+                      horizontal: 10.0, vertical: 20.0),
-                  if (category != null) {
+                  child: Row(
-                    return ListTile(
+                    mainAxisAlignment: MainAxisAlignment.start,
-                      title: Text(category.elementAt(index).name),
+                    children: [
-                      onTap: () {
+                      ElevatedButton(
-                        bookProvider.filterBookByCategory(
+                        child: const Row(
-                            category!.elementAt(index).name);
+                          children: [Icon(Icons.arrow_back), Text("Back")],
-                        bookProvider.getBooks();
+                        ),
-                        Navigator.pop(context);
+                        onPressed: () {
-                      },
+                          bookProvider.filterBookByCategory(null);
-                    );
+                          bookProvider.getBooks();
-                  }
+                          context.pop();
-                  return Container();
+                        },
-                },
+                      ),
-              ),
+                    ],
+                  ),
+                ),
+                Expanded(
+                  child: ListView.builder(
+                    itemCount: category != null ? category.length : 0,
+                    itemBuilder: (context, index) {
+                      if (category != null) {
+                        return ListTile(
+                          title: Text(category.elementAt(index).name),
+                          onTap: () {
+                            bookProvider.filterBookByCategory(
+                                category!.elementAt(index).name);
+                            bookProvider.getBooks();
+                            Navigator.pop(context);
+                          },
+                        );
+                      }
+                      return Container();
+                    },
+                  ),
+                ),
+              ],
            ),
          ),
        );

--- a/lib/src/widgets/books/book_list.dart
+++ b/lib/src/widgets/books/book_list.dart
@@ -21,60 +21,111 @@ class _BookList extends State<BookList> {
    Provider.of<BookProvider>(context, listen: false).getBooks();
  }
+  @override
+  void dispose() {
+    super.dispose();
+  }
+  ScrollController listScrollController = ScrollController();
+  void scrollToTop() {
+    if (listScrollController.hasClients) {
+      final position = listScrollController.position.minScrollExtent;
+      listScrollController.jumpTo(position);
+    }
+  }
+  Future<void> nextPage() async {
+    if (Provider.of<BookProvider>(context, listen: false).hasNextPage) {
+      Provider.of<BookProvider>(context, listen: false).setPage(
+        Provider.of<BookProvider>(context, listen: false).pageNumber + 1,
+      );
+    } else {
+      Provider.of<BookProvider>(context, listen: false).setPage(
+          Provider.of<BookProvider>(context, listen: false).totalPages!);
+    }
+    Provider.of<BookProvider>(context, listen: false).getBooks();
+    scrollToTop();
+  }
+  Future<void> prevPage() async {
+    if (Provider.of<BookProvider>(context, listen: false).hasPrevPage) {
+      Provider.of<BookProvider>(context, listen: false).setPage(
+        Provider.of<BookProvider>(context, listen: false).pageNumber - 1,
+      );
+    } else {
+      Provider.of<BookProvider>(context, listen: false).setPage(1);
+    }
+    Provider.of<BookProvider>(context, listen: false).getBooks();
+    scrollToTop();
+  }
  @override
  Widget build(BuildContext context) {
    return Consumer<BookProvider>(
      builder: (context, bookProvider, child) {
-        if (!bookProvider.isLoading) {
+        if (bookProvider.books == null) {
-          final Iterable<Book> books = bookProvider.books!.map((book) {
+          return const Center(
-            if (book["category_detail"] != null) {
+            child: CircularProgressIndicator(),
-              final Category category = Category.fromJson(
+          );
-                book["category_detail"],
+        }
-              );
+        final Iterable<Book> books = bookProvider.books!.map((book) {
-              return Book(
+          if (book["category"] != null) {
-                book["id"],
+            final Category category = Category.fromJson(
-                book["title"],
+              book["category"],
-                book["author"],
+            );
-                book["description"],
-                book["cover_image"],
-                category.name,
-              );
-            }
            return Book(
              book["id"],
              book["title"],
              book["author"],
              book["description"],
              book["cover_image"],
-              null,
+              category.name,
            );
-          });
+          }
-          return NestedScrollView(
+          return Book(
-            headerSliverBuilder:
+            book["id"],
-                (BuildContext context, bool innerBoxIsScrolled) {
+            book["title"],
-              return [const TopAppBar(title: "Books")];
+            book["author"],
-            },
+            book["description"],
-            body: ListView(
+            book["cover_image"],
-              children: List.generate(books.length, (index) {
+            null,
-                return BookItem(
-                  books.elementAt(index),
-                );
-              }),
-            ),
          );
-        } else {
+        });
-          return NestedScrollView(
-            headerSliverBuilder:
+        return NestedScrollView(
-                (BuildContext context, bool innerBoxIsScrolled) {
+          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
-              return [const TopAppBar(title: "Books")];
+            return [const TopAppBar(title: "Books")];
+          },
+          body: ListView.builder(
+            controller: listScrollController,
+            itemCount: books.length + 1,
+            itemBuilder: (context, index) {
+              if (index < books.length) {
+                return BookItem(books.elementAt(index));
+              } else {
+                return Container(
+                  padding: const EdgeInsets.all(10),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      ElevatedButton(
+                        onPressed: prevPage,
+                        child: const Text('Prev'),
+                      ),
+                      Text(bookProvider.pageNumber.toString()),
+                      ElevatedButton(
+                        onPressed: nextPage,
+                        child: const Text('Next'),
+                      ),
+                    ],
+                  ),
+                );
+              }
            },
-            body: const Center(
+          ),
-              child: CircularProgressIndicator(),
+        );
-            ),
-          );
-        }
      },
    );
  }
@@ -127,14 +178,9 @@ class _TopAppBar extends State<TopAppBar> {
        leading: !showWidget
            ? IconButton(
                onPressed: () {
-                  if (category != null) {
+                  Scaffold.of(context).openDrawer();
-                    bookProvider.filterBookByCategory(null);
-                    bookProvider.getBooks();
-                  } else {
-                    Scaffold.of(context).openDrawer();
-                  }
                },
-                icon: Icon(category != null ? Icons.arrow_back : Icons.menu),
+                icon: const Icon(Icons.menu),
              )
            : null,
        elevation: 10.0,

--- a/lib/src/widgets/forms/book_loan_form.dart
+++ b/lib/src/widgets/forms/book_loan_form.dart
@@ -91,7 +91,7 @@ class _LoanBookForm extends State<LoanBookForm> {
                        if (_formKey.currentState!.validate()) {}
                        authProvider
                            .createMemberLoan(
-                              authProvider.user!.accountId,
+                              authProvider.user!.id,
                              widget.bookId,
                              int.parse(loanDayController.text),
                            )

--- a/lib/src/widgets/forms/change_password_form.dart
+++ b/lib/src/widgets/forms/change_password_form.dart
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
-import 'package:go_router/go_router.dart';
 import 'package:library_app/src/providers/auth_provider.dart';
 import 'package:library_app/src/widgets/loading.dart';
 import 'package:provider/provider.dart';
@@ -15,7 +14,8 @@ class ChangePasswordForm extends StatefulWidget {
 class _ChangePasswordForm extends State<ChangePasswordForm> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final oldPasswordController = TextEditingController();
-  final newPasswordController = TextEditingController();
+  final newPasswordController1 = TextEditingController();
+  final newPasswordController2 = TextEditingController();
  bool passwordVisible = false;
@@ -28,7 +28,8 @@ class _ChangePasswordForm extends State<ChangePasswordForm> {
  @override
  void dispose() {
    oldPasswordController.dispose();
-    newPasswordController.dispose();
+    newPasswordController1.dispose();
+    newPasswordController2.dispose();
    super.dispose();
  }
@@ -37,6 +38,7 @@ class _ChangePasswordForm extends State<ChangePasswordForm> {
    Size screenSize = MediaQuery.of(context).size;
    return Consumer<AuthProvider>(builder: (context, authProvider, child) {
+      final message = authProvider.message;
      return Column(
        children: [
          Padding(
@@ -79,7 +81,7 @@ class _ChangePasswordForm extends State<ChangePasswordForm> {
                      ),
                    ),
                    validator: (String? value) {
-                      if (value == null || value.isEmpty) {
+                      if (value == null) {
                        return "Please enter your old password";
                      } else {
                        return null;
@@ -88,7 +90,7 @@ class _ChangePasswordForm extends State<ChangePasswordForm> {
                    keyboardType: TextInputType.visiblePassword,
                  ),
                  TextFormField(
-                    controller: newPasswordController,
+                    controller: newPasswordController1,
                    obscureText: passwordVisible,
                    decoration: InputDecoration(
                      hintText: "Enter your New Password",
@@ -107,7 +109,7 @@ class _ChangePasswordForm extends State<ChangePasswordForm> {
                      ),
                    ),
                    validator: (String? value) {
-                      if (value == null || value.isEmpty) {
+                      if (value == null) {
                        return "Please enter your new password";
                      } else {
                        return null;
@@ -115,36 +117,43 @@ class _ChangePasswordForm extends State<ChangePasswordForm> {
                    },
                    keyboardType: TextInputType.visiblePassword,
                  ),
+                  TextFormField(
+                    controller: newPasswordController2,
+                    decoration: const InputDecoration(
+                      hintText: "Confirm your New Password",
+                      labelText: "Confirm New Password",
+                    ),
+                    validator: (String? value) {
+                      if (value == null) {
+                        return "Please enter your confirm new password";
+                      } else {
+                        return null;
+                      }
+                    },
+                  ),
+                  Text(
+                    message ?? "",
+                    style: const TextStyle(color: Colors.red),
+                  ),
                  const SizedBox(
                    height: 20.0,
                  ),
-                  Column(
+                  SizedBox(
-                    children: [
+                    width: double.infinity,
-                      SizedBox(
+                    child: FilledButton(
-                        width: double.infinity,
+                      onPressed: () async {
-                        child: FilledButton(
+                        if (_formKey.currentState!.validate()) {}
-                          onPressed: () async {
+                        authProvider.changePassword(
-                            if (_formKey.currentState!.validate()) {}
+                          context,
-                            authProvider.changePassword(
+                          oldPasswordController.text,
-                              context,
+                          newPasswordController1.text,
-                              authProvider.user!.accountId,
+                          newPasswordController2.text,
-                              oldPasswordController.text,
+                        );
-                              newPasswordController.text,
+                      },
-                            );
+                      child: authProvider.isLoading
-                          },
+                          ? const Loading()
-                          child: authProvider.isLoading
+                          : const Text("Submit"),
-                              ? const Loading()
+                    ),
-                              : const Text("Submit"),
-                        ),
-                      ),
-                      SizedBox(
-                        width: double.infinity,
-                        child: TextButton(
-                          child: const Text("Cancel"),
-                          onPressed: () => context.pop("/"),
-                        ),
-                      ),
-                    ],
                  ),
                ],
              ),

--- a/lib/src/widgets/forms/login_form.dart
+++ b/lib/src/widgets/forms/login_form.dart
@@ -39,7 +39,8 @@ class _LoginForm extends State<LoginForm> {
    const String formText = "Log In to continue";
    return Consumer<AuthProvider>(builder: (context, authProvider, child) {
-      final isInvalid = authProvider.invalidUsernameOrPassword;
+      final isInvalidUsernameOrPassword =
+          authProvider.invalidUsernameOrPassword;
      return Column(
        children: [
@@ -106,28 +107,21 @@ class _LoginForm extends State<LoginForm> {
                    },
                    keyboardType: TextInputType.visiblePassword,
                  ),
-                  Visibility(
+                  Padding(
-                    visible: isInvalid,
+                    padding: const EdgeInsets.symmetric(vertical: 20.0),
-                    child: Container(
+                    child: Text(
-                      decoration: BoxDecoration(
+                      isInvalidUsernameOrPassword
-                        borderRadius: BorderRadius.circular(10),
+                          ? "Invalid username or password"
-                        color: Theme.of(context).highlightColor,
+                          : "",
-                      ),
+                      style: const TextStyle(color: Colors.red),
-                      margin: const EdgeInsets.symmetric(vertical: 20.0),
-                      padding: const EdgeInsets.symmetric(
-                          horizontal: 10.0, vertical: 8.0),
-                      child: const Text("Invalid username or password"),
                    ),
                  ),
-                  const SizedBox(
-                    height: 20.0,
-                  ),
                  Column(
                    children: [
                      SizedBox(
                        width: double.infinity,
                        child: FilledButton(
-                          onPressed: () {
+                          onPressed: () async {
                            if (_formKey.currentState!.validate()) {}
                            authProvider.signIn(
                              context,

--- a/lib/src/widgets/forms/profile_edit_form.dart
+++ b/lib/src/widgets/forms/profile_edit_form.dart
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 import 'package:library_app/src/providers/auth_provider.dart';
 import 'package:library_app/src/models/user.dart';
@@ -43,6 +42,7 @@ class _ProfileEditForm extends State<ProfileEditForm> {
    lastNameControler.text = user?.lastName ?? "";
    return Consumer<AuthProvider>(builder: (context, authProvider, child) {
+      final message = authProvider.message;
      return Column(
        children: [
          Form(
@@ -62,6 +62,7 @@ class _ProfileEditForm extends State<ProfileEditForm> {
                      if (value == null || value.isEmpty) {
                        return "Please enter your username";
                      }
                      return null;
                    },
                  ),
@@ -75,6 +76,7 @@ class _ProfileEditForm extends State<ProfileEditForm> {
                      if (value == null || value.isEmpty) {
                        return "Please enter your email";
                      }
                      return null;
                    },
                  ),
@@ -92,6 +94,10 @@ class _ProfileEditForm extends State<ProfileEditForm> {
                      labelText: "Last Name",
                    ),
                  ),
+                  Text(
+                    message ?? "",
+                    style: const TextStyle(color: Colors.red),
+                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 40.0),
                    child: SizedBox(
@@ -99,33 +105,20 @@ class _ProfileEditForm extends State<ProfileEditForm> {
                      child: FilledButton(
                        onPressed: () {
                          if (_formKey.currentState!.validate()) {}
-                          authProvider
+                          authProvider.updateUserDetail(
-                              .updateUserDetail(
+                            context,
-                                authProvider.user!.id,
+                            authProvider.user!.id,
-                                usernameControler.text,
+                            usernameControler.text,
-                                emailControler.text,
+                            emailControler.text,
-                                firstNameControler.text,
+                            firstNameControler.text,
-                                lastNameControler.text,
+                            lastNameControler.text,
-                                authProvider.user!.isStaff,
+                            authProvider.user!.isStaff,
-                              )
+                          );
-                              .then(
-                                (res) => Navigator.pop(context),
-                              );
                        },
                        child: const Text("Submit"),
                      ),
                    ),
                  ),
-                  Padding(
-                    padding: const EdgeInsets.only(top: 10.0),
-                    child: SizedBox(
-                      width: double.infinity,
-                      child: ElevatedButton(
-                        onPressed: () => context.go("/change-password"),
-                        child: const Text("Change Password"),
-                      ),
-                    ),
-                  )
                ],
              ),
            ),

--- a/lib/src/widgets/forms/reset_password_form.dart
+++ b/lib/src/widgets/forms/reset_password_form.dart
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:library_app/src/providers/auth_provider.dart';
-import 'package:library_app/src/screens/form_screen.dart';
 import 'package:library_app/src/widgets/loading.dart';
 import 'package:provider/provider.dart';
@@ -22,6 +22,8 @@ class _ResetPasswordForm extends State<ResetPasswordForm> {
    const String formText = "Confirm your email to continue reset password";
    return Consumer<AuthProvider>(builder: (context, authProvider, child) {
+      final message = authProvider.message;
      return Column(
        children: [
          Container(
@@ -67,13 +69,14 @@ class _ResetPasswordForm extends State<ResetPasswordForm> {
                      validator: (String? value) {
                        if (value == null || value.isEmpty) {
                          return "Please enter your email";
-                        } else if (!value.contains("@")) {
-                          return "Email should include '@'";
                        }
                        return null;
                      },
                    ),
-                    // Flutter, iwant to go to ConfirmResetPasswordScreen after authProvider.resetPassword succeed with response 200
+                    Text(
+                      message ?? "",
+                      style: const TextStyle(color: Colors.red),
+                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(
                        vertical: 20.0,
@@ -85,22 +88,8 @@ class _ResetPasswordForm extends State<ResetPasswordForm> {
                            child: FilledButton(
                              onPressed: () {
                                if (_formKey.currentState!.validate()) {}
-                                authProvider
+                                authProvider.resetPassword(
-                                    .resetPassword(emailController.text)
+                                    context, emailController.text);
-                                    .then(
-                                  (response) {
-                                    Navigator.of(context).push(
-                                      MaterialPageRoute(
-                                        builder: (context) =>
-                                            const ConfirmResetPasswordScreen(),
-                                      ),
-                                    );
-                                  },
-                                ).catchError(
-                                  (error) {
-                                    debugPrint('Exception: $error');
-                                  },
-                                );
                              },
                              child: authProvider.isLoading
                                  ? const Loading()
@@ -142,12 +131,7 @@ class _ConfirmResetPasswordForm extends State<ConfirmResetPasswordForm> {
    const String formText = "Enter the pin that we just sent to your email";
    return Consumer<AuthProvider>(builder: (context, authProvider, child) {
-      if (authProvider.isLoading) {
+      final message = authProvider.message;
-        return const Center(
-          child: CircularProgressIndicator(),
-        );
-      }
      return Column(
        children: [
          Container(
@@ -190,6 +174,17 @@ class _ConfirmResetPasswordForm extends State<ConfirmResetPasswordForm> {
                        labelText: "confirmation pin",
                        suffixIcon: Icon(Icons.password),
                      ),
+                      keyboardType: TextInputType.number,
+                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+                      validator: (String? value) {
+                        if (value == null) {
+                          return "Please enter your pin";
+                        } else if (value is int) {
+                          return "Please enter pin in number";
+                        }
+                        return null;
+                      },
                    ),
                    TextFormField(
                      controller: password1Controller,
@@ -241,12 +236,16 @@ class _ConfirmResetPasswordForm extends State<ConfirmResetPasswordForm> {
                      validator: (String? value) {
                        if (value == null || value.isEmpty) {
                          return "Please enter your password";
-                        } else {
-                          return null;
                        }
+                        return null;
                      },
                      keyboardType: TextInputType.visiblePassword,
                    ),
+                    Text(
+                      message ?? "",
+                      style: const TextStyle(color: Colors.red),
+                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(
                        vertical: 20.0,
@@ -258,28 +257,16 @@ class _ConfirmResetPasswordForm extends State<ConfirmResetPasswordForm> {
                            child: FilledButton(
                              onPressed: () {
                                if (_formKey.currentState!.validate()) {}
-                                authProvider
+                                authProvider.confirmResetPassword(
-                                    .confirmResetPassword(
+                                  context,
                                  int.parse(pinController.text),
                                  password1Controller.text,
                                  password2Controller.text,
-                                )
-                                    .then(
-                                  (response) {
-                                    Navigator.of(context).push(
-                                      MaterialPageRoute(
-                                        builder: (context) =>
-                                            const LoginScreen(),
-                                      ),
-                                    );
-                                  },
-                                ).catchError(
-                                  (error) {
-                                    debugPrint('Exception: $error');
-                                  },
                                );
                              },
-                              child: const Text("Submit"),
+                              child: authProvider.isLoading
+                                  ? const Loading()
+                                  : const Text("Submit"),
                            ),
                          ),
                        ],

--- a/lib/src/widgets/forms/search_form.dart
+++ b/lib/src/widgets/forms/search_form.dart
@@ -24,17 +24,19 @@ class _SearchForm extends State<SearchForm> {
      width: queryData.size.width * 0.8,
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: SearchBar(
-        hintText: "Enter keywords...",
+        hintText: "Enter book title...",
        elevation: WidgetStateProperty.all(0),
        onChanged: (value) {
-          Future.delayed(
+          if (value.length >= 3) {
-            Duration.zero,
+            Future.delayed(
-            () {
+              Duration.zero,
-              Provider.of<BookProvider>(context, listen: false)
+              () {
-                  .setSearchKeyword(value);
+                Provider.of<BookProvider>(context, listen: false)
-              Provider.of<BookProvider>(context, listen: false).getBooks();
+                    .setSearchKeyword(value);
-            },
+                Provider.of<BookProvider>(context, listen: false).getBooks();
-          );
+              },
+            );
+          }
        },
        leading: const Icon(Icons.search),
      ),

--- a/lib/src/widgets/forms/sign_up_form.dart
+++ b/lib/src/widgets/forms/sign_up_form.dart
@@ -40,6 +40,8 @@ class _SignUpForm extends State<SignUpForm> {
    const String formText = "Sign In to get started";
    return Consumer<AuthProvider>(builder: (context, authProvider, child) {
+      final message = authProvider.message;
      return Column(
        children: [
          Padding(
@@ -120,8 +122,10 @@ class _SignUpForm extends State<SignUpForm> {
                    },
                    keyboardType: TextInputType.visiblePassword,
                  ),
-                  const SizedBox(
+                  Padding(
-                    height: 20.0,
+                    padding: const EdgeInsets.symmetric(vertical: 20.0),
+                    child: Text(message ?? "",
+                        style: const TextStyle(color: Colors.red)),
                  ),
                  Column(
                    children: [

--- a/lib/src/widgets/loans/admin_loan_list.dart
+++ b/lib/src/widgets/loans/admin_loan_list.dart
@@ -36,6 +36,40 @@ class _AdminLoanList extends State<AdminLoanList> {
    super.initState();
  }
+  ScrollController listScrollController = ScrollController();
+  void scrollToTop() {
+    if (listScrollController.hasClients) {
+      final position = listScrollController.position.minScrollExtent;
+      listScrollController.jumpTo(position);
+    }
+  }
+  Future<void> nextPage() async {
+    if (Provider.of<AuthProvider>(context, listen: false).hasNextPage) {
+      Provider.of<AuthProvider>(context, listen: false).setPage(
+        Provider.of<AuthProvider>(context, listen: false).pageNumber + 1,
+      );
+    } else {
+      Provider.of<AuthProvider>(context, listen: false).setPage(
+          Provider.of<AuthProvider>(context, listen: false).totalPages!);
+    }
+    Provider.of<AuthProvider>(context, listen: false).getMemberLoan();
+    scrollToTop();
+  }
+  Future<void> prevPage() async {
+    if (Provider.of<AuthProvider>(context, listen: false).hasPrevPage) {
+      Provider.of<AuthProvider>(context, listen: false).setPage(
+        Provider.of<AuthProvider>(context, listen: false).pageNumber - 1,
+      );
+    } else {
+      Provider.of<AuthProvider>(context, listen: false).setPage(1);
+    }
+    Provider.of<AuthProvider>(context, listen: false).getMemberLoan();
+    scrollToTop();
+  }
  @override
  Widget build(BuildContext context) {
    return Consumer<AuthProvider>(builder: (context, loanProvider, child) {
@@ -45,18 +79,8 @@ class _AdminLoanList extends State<AdminLoanList> {
      if (getLoans != null) {
        var loans = getLoans.map(
          (loan) {
-            var book = Book.fromJson(loan["book_detail"]);
+            var book = Book.fromJson(loan["book"]);
-            var memberData = loan["member_detail"];
+            var user = User.fromJson(loan["user"]);
-            var userData = memberData["user"];
-            var user = User(
-              userData["id"],
-              memberData["id"],
-              userData["username"],
-              userData["email"],
-              userData["first_name"],
-              userData["last_name"],
-              userData["is_staff"],
-            );
            return Loan(
              book,
@@ -73,13 +97,34 @@ class _AdminLoanList extends State<AdminLoanList> {
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [TopAppBar(title: title)];
          },
-          body: ListView(
+          body: ListView.builder(
-            children: List.generate(loans.length, (index) {
+            controller: listScrollController,
-              return LoanItem(
+            itemCount: loans.length + 1,
-                loans.elementAt(index),
+            itemBuilder: (context, index) {
-                user: loans.elementAt(index).user,
+              if (index < loans.length) {
-              );
+                return LoanItem(
-            }),
+                  loans.elementAt(index),
+                );
+              } else {
+                return Container(
+                  padding: const EdgeInsets.all(10),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      ElevatedButton(
+                        onPressed: prevPage,
+                        child: const Text('Prev'),
+                      ),
+                      Text(loanProvider.pageNumber.toString()),
+                      ElevatedButton(
+                        onPressed: nextPage,
+                        child: const Text('Next'),
+                      ),
+                    ],
+                  ),
+                );
+              }
+            },
          ),
        );
      } else {

--- a/lib/src/widgets/loans/loan_list.dart
+++ b/lib/src/widgets/loans/loan_list.dart
@@ -26,13 +26,47 @@ class _LoanList extends State<LoanList> {
    super.initState();
  }
+  ScrollController listScrollController = ScrollController();
+  void scrollToTop() {
+    if (listScrollController.hasClients) {
+      final position = listScrollController.position.minScrollExtent;
+      listScrollController.jumpTo(position);
+    }
+  }
+  Future<void> nextPage() async {
+    if (Provider.of<AuthProvider>(context, listen: false).hasNextPage) {
+      Provider.of<AuthProvider>(context, listen: false).setPage(
+        Provider.of<AuthProvider>(context, listen: false).pageNumber + 1,
+      );
+    } else {
+      Provider.of<AuthProvider>(context, listen: false).setPage(
+          Provider.of<AuthProvider>(context, listen: false).totalPages!);
+    }
+    Provider.of<AuthProvider>(context, listen: false).getMemberLoan();
+    scrollToTop();
+  }
+  Future<void> prevPage() async {
+    if (Provider.of<AuthProvider>(context, listen: false).hasPrevPage) {
+      Provider.of<AuthProvider>(context, listen: false).setPage(
+        Provider.of<AuthProvider>(context, listen: false).pageNumber - 1,
+      );
+    } else {
+      Provider.of<AuthProvider>(context, listen: false).setPage(1);
+    }
+    Provider.of<AuthProvider>(context, listen: false).getMemberLoan();
+    scrollToTop();
+  }
  @override
  Widget build(BuildContext context) {
    return Consumer<AuthProvider>(builder: (context, authProvider, child) {
      if (authProvider.memberLoans != null) {
        var loans = authProvider.memberLoans!.map(
          (loan) {
-            var book = Book.fromJson(loan["book_detail"]);
+            var book = Book.fromJson(loan["book"]);
            return Loan(
              book,
              null,
@@ -48,10 +82,35 @@ class _LoanList extends State<LoanList> {
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [const TopAppBar(title: "Book Loans")];
          },
-          body: ListView(
+          body: ListView.builder(
-            children: List.generate(loans.length, (index) {
+            controller: listScrollController,
-              return LoanItem(loans.elementAt(index));
+            itemCount: loans.length + 1,
-            }),
+            itemBuilder: (context, index) {
+              if (index < loans.length) {
+                return LoanItem(
+                  loans.elementAt(index),
+                  user: loans.elementAt(index).user,
+                );
+              } else {
+                return Container(
+                  padding: const EdgeInsets.all(10),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      ElevatedButton(
+                        onPressed: prevPage,
+                        child: const Text('Prev'),
+                      ),
+                      Text(authProvider.pageNumber.toString()),
+                      ElevatedButton(
+                        onPressed: nextPage,
+                        child: const Text('Next'),
+                      ),
+                    ],
+                  ),
+                );
+              }
+            },
          ),
        );
      } else {

--- a/lib/src/widgets/profile.dart
+++ b/lib/src/widgets/profile.dart
 import 'package:flutter/material.dart';
-import 'package:library_app/src/providers/auth_provider.dart';
+import 'package:provider/provider.dart';
+import 'package:go_router/go_router.dart';
-import 'package:library_app/src/screens/profile_edit_screen.dart';
+import 'package:library_app/src/providers/auth_provider.dart';
 import 'package:library_app/src/widgets/navigations.dart';
-import 'package:provider/provider.dart';
 class Profile extends StatefulWidget {
  const Profile({super.key});
@@ -78,19 +78,25 @@ class _Profile extends State<Profile> {
                        textAlign: TextAlign.center,
                      ),
                    ),
+                    const SizedBox(
+                      height: 10.0,
+                    ),
                    FilledButton(
                      child: const Text("Edit Profile"),
                      onPressed: () {
-                        Navigator.of(context).push(
+                        context.push("/profile-edit");
-                          MaterialPageRoute(
-                            builder: (context) => const ProfileEditScreen(),
-                          ),
-                        );
                      },
                    ),
                    const SizedBox(
                      height: 10.0,
                    ),
+                    ElevatedButton(
+                      onPressed: () => context.push("/change-password"),
+                      child: const Text("Change Password"),
+                    ),
+                    const SizedBox(
+                      height: 10.0,
+                    ),
                    OutlinedButton(
                      child: const Text("Log Out"),
                      onPressed: () {