From 052b50cd28e61c08af7bc919d87fc49021ffd455 Mon Sep 17 00:00:00 2001
From: Purvesh <ind.purvesh@gmail.com>
Date: Thu, 28 Dec 2023 10:07:37 +1300
Subject: [PATCH] admin user table

---
 react-admin/src/App.js                        |   2 +
 .../src/layouts/partials/AppSidebar.jsx       |  11 ++
 .../src/pages/admin-user/AdminUserTable.jsx   | 102 ++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 react-admin/src/pages/admin-user/AdminUserTable.jsx

diff --git a/react-admin/src/App.js b/react-admin/src/App.js
index e8457916..cc1661e0 100644
--- a/react-admin/src/App.js
+++ b/react-admin/src/App.js
@@ -7,6 +7,7 @@ import AppLayout from "./layouts/AppLayout";
 import PageTable from "./pages/page/PageTable";
 import PageCreate from "./pages/page/PageCreate";
 import PageEdit from "./pages/page/PageEdit";
+import AdminUserTable from "./pages/admin-user/AdminUserTable";
 
 function App() {
     return (
@@ -22,6 +23,7 @@ function App() {
                     <Route path="/admin/page"   element={<PageTable />} />
                     <Route path="/admin/page-create"   element={<PageCreate />} />
                     <Route path="/admin/page-edit/:page_id"   element={<PageEdit />} />
+                    <Route path="/admin/admin-user"   element={<AdminUserTable />} />
                 </Route>
 
             </Routes>
diff --git a/react-admin/src/layouts/partials/AppSidebar.jsx b/react-admin/src/layouts/partials/AppSidebar.jsx
index 0431b314..ae255a82 100644
--- a/react-admin/src/layouts/partials/AppSidebar.jsx
+++ b/react-admin/src/layouts/partials/AppSidebar.jsx
@@ -77,6 +77,17 @@ function AppSidebar() {
                                 </div>
                             </a>
 
+                            <a href="/admin/admin-user"
+                               className="flex items-center w-full py-1 px-2 mt-3 rounded relative hover:text-white hover:bg-gray-700 ">
+                                <div className="pr-2">
+                                    <FeatherIcon className="h-4 w-4" icon="users"/>
+                                </div>
+                                <div>
+                                    Admin User
+                                </div>
+                            </a>
+
+
                             <div
                                 className="pl-4 pr-2 overflow-hidden transition-all transform translate duration-300 max-h-0 "
                             >
diff --git a/react-admin/src/pages/admin-user/AdminUserTable.jsx b/react-admin/src/pages/admin-user/AdminUserTable.jsx
new file mode 100644
index 00000000..c8efdbdb
--- /dev/null
+++ b/react-admin/src/pages/admin-user/AdminUserTable.jsx
@@ -0,0 +1,102 @@
+import {useEffect, useState} from "react";
+import {Link, redirect, useNavigate} from "react-router-dom";
+import {isEmpty} from "lodash";
+
+function AdminUserTable() {
+    const [adminUsers, setAdminUsers] = useState([]);
+    const navigate = useNavigate()
+
+    const getFormattedDate = ((date) => {
+        var date = new Date(date);
+
+        return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+    })
+
+    useEffect(() => {
+        const mounted = (async () => {
+            const response = await fetch('http://localhost:8080/api/admin-user', {
+                method: 'get',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + localStorage.getItem("AUTH_TOKEN"),
+                }
+            })
+            console.log(response.ok)
+            if (!response.ok) {
+                return
+            }
+            return await response.json()
+        })
+
+        mounted().then((res) => {
+            if (isEmpty(res)) {
+                localStorage.removeItem("AUTH_TOKEN")
+                return navigate("/admin/login")
+            }
+            setAdminUsers(res.data)
+        })
+
+    }, [])
+
+    return (
+        <div className="flex-1 pl-64 bg-white">
+            <div className="px-5">
+                <div className="flex items-center">
+                    <div className="p-5 text-2xl font-semibold text-primary-500">
+                        Admin Users
+                    </div>
+                    <Link className="ml-auto bg-primary-600 py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                        to="/admin/page-create">
+                        Create
+                    </Link>
+                </div>
+
+
+                <div className="overflow-x-auto">
+                    <table className="min-w-full bg-white shadow-md rounded">
+                        <thead>
+                        <tr className="bg-gray-700 text-white">
+                            <th className="py-3 px-4 rounded-l font-semibold text-left">ID</th>
+                            <th className="py-3 px-4 font-semibol text-left">FullName</th>
+                            <th className="py-3 px-4 font-semibol text-left">Email</th>
+                            <th className="py-3 px-4 font-semibol text-left">Created at</th>
+                            <th className="py-3 px-4 font-semibol text-left">Updated at</th>
+                            <th className="py-3 px-4 font-semibol text-left">Created by</th>
+                            <th className="py-3 px-4 font-semibol text-left">Updated by</th>
+                            <th className="py-3 px-4 rounded-r font-semibol text-left">Action</th>
+                        </tr>
+                        </thead>
+                        <tbody className="">
+                        {adminUsers.map((adminUser) => {
+                            return (
+                                <tr key={adminUser.id} className="border-b">
+                                    <td className="py-3 px-4">{adminUser.id}</td>
+                                    <td className="py-3 px-4">{adminUser.full_name}</td>
+                                    <td className="py-3 px-4">{adminUser.email}</td>
+                                    <td className="py-3 px-4">
+                                        {getFormattedDate(adminUser.created_at)}
+                                    </td>
+                                    <td className="py-3 px-4">
+                                        {getFormattedDate(adminUser.updated_at)}
+                                    </td>
+                                    <td className="py-3 px-4">{adminUser.created_by}</td>
+                                    <td className="py-3 px-4">{adminUser.updated_by}</td>
+                                    <td className="py-3 px-4">
+                                        <Link className="font-medium text-primary-600 hover:text-primary-800"
+                                              to={`/admin/page-edit/${adminUser.id}`}>
+                                            Edit
+                                        </Link>
+
+                                    </td>
+                                </tr>
+                            )
+                        })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AdminUserTable
\ No newline at end of file