Add user display page

examples/fullstack/frontend/src/App.tsx

@@ -1,40 +1,82 @@
 import { useState, useEffect } from 'react'
 import reactLogo from './assets/react.svg'
+import dockerLogo from './assets/docker.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0)
-  const [greeting, setGreeting] = useState()
+  const [users, setUsers] = useState([])
+  const [page, setPage] = useState(1)
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    lastPage: 1,
+    total: 0,
+  })
 
   useEffect(() => {
-    fetch('/api')
-    .then(res => res.json())
-    .then(data => setGreeting(data))
-  }, [])
+    fetch(`/api/users?page=${page}`)
+      .then(res => res.json())
+      .then(data => {
+        setUsers(data.data || [])
+        setPagination({
+          currentPage: data.meta.currentPage,
+          lastPage: data.meta.lastPage,
+          total: data.meta.total,
+        })
+      })
+      .catch(err => console.error('Failed to fetch users:', err))
+  }, [page])
+
+  const handlePrevious = () => {
+    if (page > 1) setPage(page - 1)
+  }
+
+  const handleNext = () => {
+    if (page < pagination.lastPage) setPage(page + 1)
+  }
+
   return (
     <>
       <div>
-        <a href="https://vite.dev" target="_blank">
+        <a href="https://vite.dev" target="_blank" rel="noreferrer">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://react.dev" target="_blank">
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
           <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+                <a href="https://docker.com" target="_blank" rel="noreferrer">
+          <img src={dockerLogo} className="logo docker" alt="Docker logo" />
         </a>
       </div>
-      <h1>Vite + React</h1>
-      <h2>{ JSON.stringify(greeting) ?? 'adf' }</h2>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+
+      <h1>Vite + React + Docker + Traefik</h1>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.length > 0 ? users.map((user) => (
+            <tr key={user.id}>
+              <td>{user.fullName}</td>
+              <td>{user.email}</td>
+            </tr>
+          )) : (
+            <tr>
+              <td colSpan="2">No users found</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+
+      <div className="pagination">
+        <button onClick={handlePrevious} disabled={page === 1}>Previous</button>
+        <span>Page {pagination.currentPage} of {pagination.lastPage}</span>
+        <button onClick={handleNext} disabled={page === pagination.lastPage}>Next</button>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </>
   )
 }