เพิ่มข้อมูลทดสอบ ปรับการทำงาน Pagination และเพิ่มปุ่มสลับธีม

src/App.jsx

@@ -14,7 +14,7 @@ function App() {
     const [employee, setEmployee] = useState(null);
     const [searchTerm, setSearchTerm] = useState('');
     const [page, setPage] = useState(1);
-    const [limit, setLimit] = useState(2);
+    const [limit, setLimit] = useState(5);
     const [totalPage, setTotalPage] = useState(1);
     const [allEmployeeData, setAllEmployeeData] = useState([]);
 
@@ -86,8 +86,7 @@ function App() {
     }
 
     // เมื่อกดปุ่มเปลี่ยนหน้า
-    const handlePageChange = (value)=>{
+    const handlePageChange = (value, index, paginationArray)=>{
-        console.log(value);
         if(value === "&laquo"){
             setPage(1);
         }
@@ -105,7 +104,9 @@ function App() {
             setPage(totalPage);
         }
         else if(value === "..."){
-            if(page < totalPage){
+            // หาว่าหน้าปัจจุบันอยู่ตรง index ไหนใน paginationArray เปรียบเทียบกับ index ของ "..." ที่กด
+            const currentIndex = paginationArray.findIndex(p => p === page);
+            if(index > currentIndex){
                 setPage(page + 1);
             }
             else{

src/api/employee.js

@@ -1,4 +1,4 @@
-const  employees = [
+const employees = [
     {
         id: 1,
         name: "Cy Ganderton",
@@ -22,8 +22,312 @@ const  employees = [
         job: "Tax Accountant",
         department: "Desktop Support Department",
         active: false
+    },
+    {
+        id: 4,
+        name: "Grace Lee",
+        mail: "grace.lee@example.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 5,
+        name: "Frank Miller",
+        mail: "frank.miller@example.com",
+        job: "Project Manager",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 6,
+        name: "Alice Johnson",
+        mail: "alice.johnson@company.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 7,
+        name: "Charlie Davis",
+        mail: "charlie.davis@business.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 8,
+        name: "Emily Wilson",
+        mail: "emily.wilson@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: false
+    },
+    {
+        id: 9,
+        name: "Henry Clark",
+        mail: "henry.clark@business.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: true
+    },
+    {
+        id: 10,
+        name: "Ivy Lewis",
+        mail: "ivy.lewis@example.com",
+        job: "Software Engineer",
+        department: "Engineering Department",
+        active: false
+    },
+    {
+        id: 11,
+        name: "John Doe",
+        mail: "john.doe@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: true
+    },
+    {
+        id: 12,
+        name: "Jane Smith",
+        mail: "jane.smith@business.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 13,
+        name: "Alice Johnson",
+        mail: "alice.johnson@example.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 14,
+        name: "Bob Brown",
+        mail: "bob.brown@company.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 15,
+        name: "Charlie Davis",
+        mail: "charlie.davis@business.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 16,
+        name: "Emily Wilson",
+        mail: "emily.wilson@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: false
+    },
+    {
+        id: 17,
+        name: "Frank Miller",
+        mail: "frank.miller@business.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 18,
+        name: "Grace Lee",
+        mail: "grace.lee@example.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 19,
+        name: "Henry Clark",
+        mail: "henry.clark@company.com",
+        job: "Software Engineer",
+        department: "Engineering Department",
+        active: true
+    },
+    {
+        id: 20,
+        name: "Ivy Lewis",
+        mail: "ivy.lewis@business.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 21,
+        name: "John Doe",
+        mail: "john.doe@example.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: true
+    },
+    {
+        id: 22,
+        name: "Jane Smith",
+        mail: "jane.smith@company.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 23,
+        name: "Alice Johnson",
+        mail: "alice.johnson@business.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 24,
+        name: "Bob Brown",
+        mail: "bob.brown@example.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 25,
+        name: "Charlie Davis",
+        mail: "charlie.davis@company.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 26,
+        name: "Emily Wilson",
+        mail: "emily.wilson@business.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: false
+    },
+    {
+        id: 27,
+        name: "Frank Miller",
+        mail: "frank.miller@company.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 28,
+        name: "Grace Lee",
+        mail: "grace.lee@business.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 29,
+        name: "Henry Clark",
+        mail: "henry.clark@example.com",
+        job: "Software Engineer",
+        department: "Engineering Department",
+        active: true
+    },
+    {
+        id: 30,
+        name: "Ivy Lewis",
+        mail: "ivy.lewis@company.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 31,
+        name: "John Doe",
+        mail: "john.doe@business.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: true
+    },
+    {
+        id: 32,
+        name: "Jane Smith",
+        mail: "jane.smith@example.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 33,
+        name: "Alice Johnson",
+        mail: "alice.johnson@company.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 34,
+        name: "Bob Brown",
+        mail: "bob.brown@business.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 35,
+        name: "Charlie Davis",
+        mail: "charlie.davis@example.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 36,
+        name: "Emily Wilson",
+        mail: "emily.wilson@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: false
+    },
+    {
+        id: 37,
+        name: "Frank Miller",
+        mail: "frank.miller@business.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 38,
+        name: "Grace Lee",
+        mail: "grace.lee@company.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 39,
+        name: "Henry Clark",
+        mail: "henry.clark@business.com",
+        job: "Software Engineer",
+        department: "Engineering Department",
+        active: true
+    },
+    {
+        id: 40,
+        name: "Ivy Lewis",
+        mail: "ivy.lewis@example.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 41,
+        name: "John Doe",
+        mail: "john.doe@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: true
     }
-]
+];
 
 export const getEmployees = ()=>{
     return employees;

src/components/Navbar.jsx

@@ -1,24 +1,49 @@
+import {useEffect, useState} from "react";
+
 export default function Navbar ({onOpen, setSearchTerm}){
+    // ใช้ state สำหรับเก็บ theme และให้ React จัดการ render ใหม่
+    const [theme, setTheme] = useState("light");
+
+    useEffect(() => {
+        document.documentElement.setAttribute("data-theme", theme);
+    }, [theme]);
 
     const handleSearch = (e) =>{
         setSearchTerm(e.target.value);
     }
 
+    const handleSwitchTheme = () => {
+        setTheme(prev=>(prev === "light" ? "dark" : "light"));
+    }
+
     return(<>
-        <div className="navbar bg-base-100 shadow-sm">
+        <div className="navbar bg-base-100 shadow-md px-4 md:px-8 ">
             <div className="navbar-start">
-                <a className="btn btn-ghost text-xl">CRUD APP</a>
+                <a className="btn btn-ghost text-lg hidden sm:flex md:text-2xl font-bold transition-all duration-300">CRUD APP</a>
             </div>
-            <div className="navbar-center">
+            <div className="navbar-center hidden sm:flex">
                 <input
                     type="text"
                     placeholder="Search"
-                    className="input input-bordered w-48 md:w-auto"
+                    className="input input-bordered w-40 sm:w-50 md:w-70 text-black"
                     onChange={handleSearch}
                 />
             </div>
-            <div className="navbar-end">
+            <div className="navbar-end gap-2">
+                {/* Mobile search (visible only on small screens) */}
+                <div className="sm:hidden">
+                    <input
+                        type="text"
+                        placeholder="Search"
+                        className="input input-bordered w-32 text-sm"
+                        onChange={handleSearch}
+                    />
+                </div>
                 <a className="btn btn-primary" onClick={onOpen}>Add</a>
+                <a
+                    className="btn btn-info text-xl "
+                    onClick={handleSwitchTheme}>{theme === "dark" ? "🌞" : "🌙"}
+                </a>
             </div>
         </div>
     </>)

src/components/Pagination.jsx

@@ -9,13 +9,14 @@ export default function Pagination({totalPage, page, limit, sibling, setPage}){
             <div className="join">
                 <button className="join-item btn" onClick={() => setPage("&laquo")}>&laquo;</button>
                 <button className="join-item btn" onClick={() => setPage("&lsaquo")}>&lsaquo;</button>
-                {paginationArray.map(pageNumber=> {
+                {paginationArray.map((pageNumber, index)=> {
+                    const key = `${pageNumber}-${index}`;
                     if(pageNumber === page){
                         return (
                             <button
-                                key={pageNumber}
+                                key={key}
-                                className="join-item btn active"
+                                className="join-item btn btn-md bg-primary text-white font-bold"
-                                onClick={() => setPage(pageNumber)}
+                                onClick={() => setPage(pageNumber, index, paginationArray)}
                             >{pageNumber}
                             </button>
                         )
@@ -23,9 +24,9 @@ export default function Pagination({totalPage, page, limit, sibling, setPage}){
                     else{
                         return(
                             <button
-                                key={pageNumber}
+                                key={key}
                                 className="join-item btn"
-                                onClick={() => setPage(pageNumber)}
+                                onClick={() => setPage(pageNumber, index, paginationArray)}
                             >{pageNumber}
                             </button>
                         )

src/components/Table.jsx

@@ -38,8 +38,10 @@ export default function Table({handleOpen, tableData, onDelete}){
                         <th>Job</th>
                         <th>Department</th>
                         <th>Status</th>
+                        <th className="text-center">Actions</th>
                     </tr>
                     </thead>
+
                     <tbody>
                     {/* row */}
                     {employees.map((employee)=>(
@@ -55,24 +57,27 @@ export default function Table({handleOpen, tableData, onDelete}){
                                 </button>
                             </td>
                             <td>
-                                <button
+                                <div className="flex justify-center gap-2">
-                                    className="btn btn-secondary"
+                                    {/* ปุ่ม Update พร้อมไอคอน */}
-                                    onClick={()=>{handleOpen('edit',employee)}}
+                                    <button
-                                >
+                                        className="btn btn-xs btn-accent flex items-center gap-1"
-                                    Update
+                                        onClick={() => handleOpen('edit', employee)}
-                                </button>
+                                        title="Update Employee"
-                            </td>
+                                    >
-                            <td>
+                                        ✏️
-                                <button
+                                    </button>
-                                    className="btn btn-accent"
+                                    {/* ปุ่ม Delete แบบไอคอน */}
-                                    onClick={()=>handleDelete(employee.id)}
+                                    <button
-                                >
+                                        className="btn btn-xs btn-secondary flex items-center gap-1"
-                                    Delete
+                                        onClick={() => handleDelete(employee.id)}
-                                </button>
+                                        title="Delete Employee"
+                                    >
+                                        🗑️
+                                    </button>
+                                </div>
                             </td>
                         </tr>
                     ))}
-
                     </tbody>
                 </table>
             </div>