eleven-solutions-common-website-unique-web 2.0.1 → 2.0.3

package/dist/components/admin/Users.js

@@ -1,10 +1,81 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { FaPlus } from "react-icons/fa";
+import { fetchUsersApi, deleteUserApi } from "../api/user";
 function Users() {
+    const [users, setUsers] = useState([]);
+    const fetchUsersData = () => __awaiter(this, void 0, void 0, function* () {
+        const data = yield fetchUsersApi();
+        if (data) {
+            setUsers(data);
+        }
+        else {
+            console.error("Failed to fetch users");
+        }
+    });
+    useEffect(() => {
+        fetchUsersData();
+    }, []);
+    // const handleNav = (e: React.FormEvent) => {
+    //   e.preventDefault();
+    //   window.history.pushState({}, "", "/admin/users/userform");
+    //   // Trigger React's routing logic manually if required
+    //   const navEvent = new PopStateEvent("popstate");
+    //   window.dispatchEvent(navEvent);
+    // };
     const handleNavigation = (event, path) => {
         event.preventDefault();
         window.history.pushState({}, "", path);
         window.dispatchEvent(new PopStateEvent("popstate"));
     };
-    return (_jsxs("div", { children: ["Users", _jsx("button", { type: "button", onClick: (event) => handleNavigation(event, "users/userform"), className: "flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80", children: "User" })] }));
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 10;
+    const totalPages = Math.ceil(users.length / itemsPerPage);
+    const handleNextPage = () => {
+        if (currentPage < totalPages) {
+            setCurrentPage(currentPage + 1);
+        }
+    };
+    const handlePreviousPage = () => {
+        if (currentPage > 1) {
+            setCurrentPage(currentPage - 1);
+        }
+    };
+    const handlePageClick = (pageNumber) => {
+        setCurrentPage(pageNumber);
+    };
+    const paginatedUsers = users.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+    const handleDeleteClick = (id) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            yield deleteUserApi(id);
+            alert("User deleted successfully");
+            fetchUsersData();
+        }
+        catch (error) {
+            console.error("Error deleting User:", error);
+        }
+    });
+    // const handleEditClick = (id: string) => {
+    //   navigate("/admin/user/userform", { state: { id } });
+    // };
+    const handleEditClick = (id) => {
+        return (_jsx("a", { href: `/admin/users/userform?id=${id}`, onClick: (e) => e.preventDefault(), children: "Edit User" }));
+    };
+    return (_jsxs("div", { className: "container px-4 mx-auto mt-6", children: [_jsx("div", { className: "w-3/4", children: _jsx("h1", { className: "text-3xl font-bold text-blue-600 mb-5", children: "Users" }) }), _jsx("div", { className: "flex-grow ml-0 w-full mt-10", children: _jsxs("form", { className: "w-full ", children: [_jsx("label", { htmlFor: "default-search", className: "mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white", children: "Search" }), _jsxs("div", { className: "relative w-full", children: [_jsx("div", { className: "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none", children: _jsx("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: _jsx("path", { stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" }) }) }), _jsx("input", { type: "search", id: "default-search", className: "inline-block min-w-full p-3 ps-10 outline-none text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", placeholder: "Search Users", required: true }), _jsx("button", { type: "submit", className: "text-white absolute end-1.5 bottom-1.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800", children: "Search" })] })] }) }), _jsx("div", { className: "flex-grow ml-0 w-3/4", children: _jsx("form", { className: "w-auto" }) }), _jsxs("div", { className: "flex-grow ml-0 mt-4 w-full", children: [_jsx("div", { className: "overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg mt-6", children: _jsxs("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700", children: [_jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400", children: "Edit/Delete" }), _jsx("th", { scope: "col", className: "py-3.5 px-4 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400", children: _jsx("div", { className: "flex items-center gap-x-3", children: _jsx("span", { children: "Name" }) }) }), _jsx("th", { scope: "col", className: "px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400", children: _jsx("button", { className: "flex items-center gap-x-2", children: _jsx("span", { children: "Email" }) }) }), _jsx("th", { scope: "col", className: "px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400", children: _jsx("button", { className: "flex items-center gap-x-2", children: _jsx("span", { children: "Mobile" }) }) }), _jsx("th", { scope: "col", className: "px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400", children: "Address" }), _jsx("th", { scope: "col", className: "px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400", children: "Role Type" })] }) }), _jsx("tbody", { className: "bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900", children: paginatedUsers.map((user, index) => (_jsxs("tr", { children: [_jsx("td", { className: "px-4 py-4 text-sm whitespace-nowrap", children: _jsxs("div", { className: "flex items-center gap-x-6", children: [_jsx("button", { onClick: () => handleDeleteClick(user.id), className: "text-gray-500 transition-colors duration-200 dark:hover:text-red-600 dark:text-gray-300 hover:text-red-500 focus:outline-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "w-5 h-5", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" }) }) }), _jsx("a", { href: `/admin/users/userform?id=${user.id}`, onClick: (e) => {
+                                                                e.preventDefault(); // Prevent default navigation
+                                                                handleEditClick(user.id); // Trigger the edit functionality
+                                                                window.location.href = `/admin/users/userform?id=${user.id}`; // Manually navigate
+                                                            }, children: _jsx("button", { className: "text-gray-500 transition-colors duration-200 dark:hover:text-yellow-500 dark:text-gray-300 hover:text-yellow-500 focus:outline-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-5 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" }) }) }) })] }) }), _jsx("td", { className: "px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap", children: _jsx("div", { className: "inline-flex items-center gap-x-3", children: _jsx("div", { className: "flex items-center gap-x-2", children: _jsx("div", { children: _jsx("h2", { className: "  text-sm font-medium text-gray-800 dark:text-white ", children: user.name }) }) }) }) }), _jsx("td", { className: "px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap", children: user.email }), _jsx("td", { className: "px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap", children: (user === null || user === void 0 ? void 0 : user.mobile) || "Not Provided" }), _jsx("td", { className: "px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap", children: (user === null || user === void 0 ? void 0 : user.address) || "Not Provided" }), _jsx("td", { className: "px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap", children: user.roleType === "1" ? "Guest" : "Admin" })] }, user.id || index))) })] }) }), _jsxs("div", { className: "flex items-center justify-between mt-6", children: [_jsxs("button", { onClick: handlePreviousPage, disabled: currentPage === 1, className: "flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "w-5 h-5 rtl:-scale-x-100", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" }) }), _jsx("span", { children: "previous" })] }), _jsx("div", { className: "items-center hidden lg:flex gap-x-3", children: Array.from({ length: totalPages }, (_, index) => (_jsx("button", { onClick: () => handlePageClick(index + 1), className: `px-2 py-1 text-sm ${currentPage === index + 1
+                                        ? "text-blue-500 bg-blue-100"
+                                        : "text-gray-500 hover:bg-gray-100"} rounded-md`, children: index + 1 }, index + 1))) }), _jsxs("button", { onClick: handleNextPage, disabled: currentPage === totalPages, className: "flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800", children: [_jsx("span", { children: "Next" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "w-5 h-5 rtl:-scale-x-100", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" }) })] })] }), _jsx("div", { className: "flex-grow ml-0 mt-4 w-0", children: _jsxs("button", { type: "button", onClick: (event) => handleNavigation(event, "/admin/users/userform"), className: "flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80", children: [_jsx(FaPlus, { className: "mr-2 font-medium" }), "User"] }) })] })] }));
 }
 export default Users;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleven-solutions-common-website-unique-web",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "main": "./dist/index.js",
   "scripts": {
     "build": "tsc",

package/src/components/admin/Users.tsx

@@ -1,386 +1,388 @@
-// import React from "react";
-// import { useState, useEffect } from "react";
-
-// import { FaPlus } from "react-icons/fa";
-
-// import { fetchUsersApi, deleteUserApi } from "../api/user";
-
-// function Users() {
-//   const [users, setUsers] = useState<any[]>([]);
-
-//   const fetchUsersData = async () => {
-//     const data = await fetchUsersApi();
-//     if (data) {
-//       setUsers(data as any[]);
-//     } else {
-//       console.error("Failed to fetch users");
-//     }
-//   };
-
-//   useEffect(() => {
-//     fetchUsersData();
-//   }, []);
-//   // const handleNav = (e: React.FormEvent) => {
-//   //   e.preventDefault();
-//   //   window.history.pushState({}, "", "/admin/users/userform");
+import React from "react";
+import { useState, useEffect } from "react";
 
-//   //   // Trigger React's routing logic manually if required
-//   //   const navEvent = new PopStateEvent("popstate");
-//   //   window.dispatchEvent(navEvent);
-//   // };
+import { FaPlus } from "react-icons/fa";
 
-//   const handleNavigation = (event: React.MouseEvent, path: string) => {
-//     event.preventDefault();
-//     window.history.pushState({}, "", path);
-//     window.dispatchEvent(new PopStateEvent("popstate"));
-//   };
+import { fetchUsersApi, deleteUserApi } from "../api/user";
 
-//   const [currentPage, setCurrentPage] = useState(1);
-//   const itemsPerPage = 10;
+function Users() {
+  const [users, setUsers] = useState<any[]>([]);
+
+  const fetchUsersData = async () => {
+    const data = await fetchUsersApi();
+    if (data) {
+      setUsers(data as any[]);
+    } else {
+      console.error("Failed to fetch users");
+    }
+  };
 
-//   const totalPages = Math.ceil(users.length / itemsPerPage);
+  useEffect(() => {
+    fetchUsersData();
+  }, []);
+  // const handleNav = (e: React.FormEvent) => {
+  //   e.preventDefault();
+  //   window.history.pushState({}, "", "/admin/users/userform");
 
-//   const handleNextPage = () => {
-//     if (currentPage < totalPages) {
-//       setCurrentPage(currentPage + 1);
-//     }
-//   };
+  //   // Trigger React's routing logic manually if required
+  //   const navEvent = new PopStateEvent("popstate");
+  //   window.dispatchEvent(navEvent);
+  // };
 
-//   const handlePreviousPage = () => {
-//     if (currentPage > 1) {
-//       setCurrentPage(currentPage - 1);
-//     }
-//   };
+  const handleNavigation = (event: React.MouseEvent, path: string) => {
+    event.preventDefault();
+    window.history.pushState({}, "", path);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  };
 
-//   const handlePageClick = (pageNumber: number) => {
-//     setCurrentPage(pageNumber);
-//   };
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
 
-//   const paginatedUsers = users.slice(
-//     (currentPage - 1) * itemsPerPage,
-//     currentPage * itemsPerPage
-//   );
+  const totalPages = Math.ceil(users.length / itemsPerPage);
 
-//   const handleDeleteClick = async (id: string) => {
-//     try {
-//       await deleteUserApi(id);
-//       alert("User deleted successfully");
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
 
-//       fetchUsersData();
-//     } catch (error) {
-//       console.error("Error deleting User:", error);
-//     }
-//   };
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
 
-//   // const handleEditClick = (id: string) => {
-//   //   navigate("/admin/user/userform", { state: { id } });
-//   // };
+  const handlePageClick = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+  };
 
-//   const handleEditClick = (id: string) => {
-//     return (
-//       <a
-//         href={`/admin/users/userform?id=${id}`}
-//         onClick={(e) => e.preventDefault()}
-//       >
-//         Edit User
-//       </a>
-//     );
-//   };
+  const paginatedUsers = users.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
 
-//   return (
-//     <div className="container px-4 mx-auto mt-6">
-//       <div className="w-3/4">
-//         <h1 className="text-3xl font-bold text-blue-600 mb-5">Users</h1>
-//       </div>
-//       <div className="flex-grow ml-0 w-full mt-10">
-//         <form className="w-full ">
-//           <label
-//             htmlFor="default-search"
-//             className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
-//           >
-//             Search
-//           </label>
-//           <div className="relative w-full">
-//             <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-//               <svg
-//                 className="w-4 h-4 text-gray-500 dark:text-gray-400"
-//                 aria-hidden="true"
-//                 xmlns="http://www.w3.org/2000/svg"
-//                 fill="none"
-//                 viewBox="0 0 20 20"
-//               >
-//                 <path
-//                   stroke="currentColor"
-//                   stroke-linecap="round"
-//                   stroke-linejoin="round"
-//                   stroke-width="2"
-//                   d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
-//                 />
-//               </svg>
-//             </div>
-//             <input
-//               type="search"
-//               id="default-search"
-//               className="inline-block min-w-full p-3 ps-10 outline-none text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-//               placeholder="Search Users"
-//               required
-//             />
-//             <button
-//               type="submit"
-//               className="text-white absolute end-1.5 bottom-1.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-//             >
-//               Search
-//             </button>
-//           </div>
-//         </form>
-//       </div>
-//       <div className="flex-grow ml-0 w-3/4">
-//         <form className="w-auto">{/* Search Form */}</form>
-//       </div>
-//       <div className="flex-grow ml-0 mt-4 w-full">
-//         <div className="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg mt-6">
-//           <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-//             <thead className="bg-gray-50 dark:bg-gray-800">
-//               <tr>
-//                 <th
-//                   scope="col"
-//                   className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
-//                 >
-//                   Edit/Delete
-//                 </th>
-//                 <th
-//                   scope="col"
-//                   className="py-3.5 px-4 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
-//                 >
-//                   <div className="flex items-center gap-x-3">
-//                     <span>Name</span>
-//                   </div>
-//                 </th>
-
-//                 <th
-//                   scope="col"
-//                   className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
-//                 >
-//                   <button className="flex items-center gap-x-2">
-//                     <span>Email</span>
-//                   </button>
-//                 </th>
-
-//                 <th
-//                   scope="col"
-//                   className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
-//                 >
-//                   <button className="flex items-center gap-x-2">
-//                     <span>Mobile</span>
-//                   </button>
-//                 </th>
-
-//                 <th
-//                   scope="col"
-//                   className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
-//                 >
-//                   Address
-//                 </th>
-
-//                 <th
-//                   scope="col"
-//                   className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
-//                 >
-//                   Role Type
-//                 </th>
-//               </tr>
-//             </thead>
-//             <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
-//               {paginatedUsers.map((user, index) => (
-//                 <tr key={user.id || index}>
-//                   <td className="px-4 py-4 text-sm whitespace-nowrap">
-//                     <div className="flex items-center gap-x-6">
-//                       <button
-//                         onClick={() => handleDeleteClick(user.id)}
-//                         className="text-gray-500 transition-colors duration-200 dark:hover:text-red-600 dark:text-gray-300 hover:text-red-500 focus:outline-none"
-//                       >
-//                         <svg
-//                           xmlns="http://www.w3.org/2000/svg"
-//                           fill="none"
-//                           viewBox="0 0 24 24"
-//                           stroke-width="1.5"
-//                           stroke="currentColor"
-//                           className="w-5 h-5"
-//                         >
-//                           <path
-//                             stroke-linecap="round"
-//                             stroke-linejoin="round"
-//                             d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-//                           />
-//                         </svg>
-//                       </button>
-
-//                       <a
-//                         href={`/admin/users/userform?id=${user.id}`}
-//                         onClick={(e) => {
-//                           e.preventDefault(); // Prevent default navigation
-//                           handleEditClick(user.id); // Trigger the edit functionality
-//                           window.location.href = `/admin/users/userform?id=${user.id}`; // Manually navigate
-//                         }}
-//                       >
-//                         <button className="text-gray-500 transition-colors duration-200 dark:hover:text-yellow-500 dark:text-gray-300 hover:text-yellow-500 focus:outline-none">
-//                           <svg
-//                             xmlns="http://www.w3.org/2000/svg"
-//                             fill="none"
-//                             viewBox="0 0 24 24"
-//                             strokeWidth="1.5"
-//                             stroke="currentColor"
-//                             className="w-5 h-5"
-//                           >
-//                             <path
-//                               strokeLinecap="round"
-//                               strokeLinejoin="round"
-//                               d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-//                             />
-//                           </svg>
-//                         </button>
-//                       </a>
-//                     </div>
-//                   </td>
-//                   <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
-//                     <div className="inline-flex items-center gap-x-3">
-//                       <div className="flex items-center gap-x-2">
-//                         <div>
-//                           <h2 className="  text-sm font-medium text-gray-800 dark:text-white ">
-//                             {user.name}
-//                           </h2>
-//                         </div>
-//                       </div>
-//                     </div>
-//                   </td>
-//                   <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
-//                     {user.email}
-//                   </td>
-//                   <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
-//                     {user?.mobile || "Not Provided"}
-//                   </td>
-//                   <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
-//                     {user?.address || "Not Provided"}
-//                   </td>
-//                   <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
-//                     {user.roleType === "1" ? "Guest" : "Admin"}
-//                   </td>
-//                 </tr>
-//               ))}
-//             </tbody>
-//           </table>
-//         </div>
-
-//         <div className="flex items-center justify-between mt-6">
-//           <button
-//             onClick={handlePreviousPage}
-//             disabled={currentPage === 1}
-//             className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
-//           >
-//             <svg
-//               xmlns="http://www.w3.org/2000/svg"
-//               fill="none"
-//               viewBox="0 0 24 24"
-//               stroke-width="1.5"
-//               stroke="currentColor"
-//               className="w-5 h-5 rtl:-scale-x-100"
-//             >
-//               <path
-//                 stroke-linecap="round"
-//                 stroke-linejoin="round"
-//                 d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
-//               />
-//             </svg>
-
-//             <span>previous</span>
-//           </button>
-
-//           <div className="items-center hidden lg:flex gap-x-3">
-//             {Array.from({ length: totalPages }, (_, index) => (
-//               <button
-//                 key={index + 1}
-//                 onClick={() => handlePageClick(index + 1)}
-//                 className={`px-2 py-1 text-sm ${
-//                   currentPage === index + 1
-//                     ? "text-blue-500 bg-blue-100"
-//                     : "text-gray-500 hover:bg-gray-100"
-//                 } rounded-md`}
-//               >
-//                 {index + 1}
-//               </button>
-//             ))}
-//           </div>
-//           <button
-//             onClick={handleNextPage}
-//             disabled={currentPage === totalPages}
-//             className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
-//           >
-//             <span>Next</span>
-
-//             <svg
-//               xmlns="http://www.w3.org/2000/svg"
-//               fill="none"
-//               viewBox="0 0 24 24"
-//               stroke-width="1.5"
-//               stroke="currentColor"
-//               className="w-5 h-5 rtl:-scale-x-100"
-//             >
-//               <path
-//                 stroke-linecap="round"
-//                 stroke-linejoin="round"
-//                 d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
-//               />
-//             </svg>
-//           </button>
-//         </div>
-
-//         <div className="flex-grow ml-0 mt-4 w-0">
-//           {/* <a href="/admin/users/userform">
-//             <button
-//               type="button"
-//               className="flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
-//             >
-//               <FaPlus className="mr-2 font-medium" />
-//               User
-//             </button>
-//           </a> */}
-//           <button
-//             type="button"
-//             onClick={(event) => handleNavigation(event, "users/userform")}
-//             className="flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
-//           >
-//             <FaPlus className="mr-2 font-medium" />
-//             User
-//           </button>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// }
+  const handleDeleteClick = async (id: string) => {
+    try {
+      await deleteUserApi(id);
+      alert("User deleted successfully");
 
-// export default Users;
+      fetchUsersData();
+    } catch (error) {
+      console.error("Error deleting User:", error);
+    }
+  };
 
-import React from "react";
+  // const handleEditClick = (id: string) => {
+  //   navigate("/admin/user/userform", { state: { id } });
+  // };
 
-function Users() {
-  const handleNavigation = (event: React.MouseEvent, path: string) => {
-    event.preventDefault();
-    window.history.pushState({}, "", path);
-    window.dispatchEvent(new PopStateEvent("popstate"));
+  const handleEditClick = (id: string) => {
+    return (
+      <a
+        href={`/admin/users/userform?id=${id}`}
+        onClick={(e) => e.preventDefault()}
+      >
+        Edit User
+      </a>
+    );
   };
 
   return (
-    <div>
-      Users
-      <button
-        type="button"
-        onClick={(event) => handleNavigation(event, "users/userform")}
-        className="flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
-      >
-        User
-      </button>
+    <div className="container px-4 mx-auto mt-6">
+      <div className="w-3/4">
+        <h1 className="text-3xl font-bold text-blue-600 mb-5">Users</h1>
+      </div>
+      <div className="flex-grow ml-0 w-full mt-10">
+        <form className="w-full ">
+          <label
+            htmlFor="default-search"
+            className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+          >
+            Search
+          </label>
+          <div className="relative w-full">
+            <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+              <svg
+                className="w-4 h-4 text-gray-500 dark:text-gray-400"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+                />
+              </svg>
+            </div>
+            <input
+              type="search"
+              id="default-search"
+              className="inline-block min-w-full p-3 ps-10 outline-none text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              placeholder="Search Users"
+              required
+            />
+            <button
+              type="submit"
+              className="text-white absolute end-1.5 bottom-1.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              Search
+            </button>
+          </div>
+        </form>
+      </div>
+      <div className="flex-grow ml-0 w-3/4">
+        <form className="w-auto">{/* Search Form */}</form>
+      </div>
+      <div className="flex-grow ml-0 mt-4 w-full">
+        <div className="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg mt-6">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-800">
+              <tr>
+                <th
+                  scope="col"
+                  className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                >
+                  Edit/Delete
+                </th>
+                <th
+                  scope="col"
+                  className="py-3.5 px-4 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                >
+                  <div className="flex items-center gap-x-3">
+                    <span>Name</span>
+                  </div>
+                </th>
+
+                <th
+                  scope="col"
+                  className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                >
+                  <button className="flex items-center gap-x-2">
+                    <span>Email</span>
+                  </button>
+                </th>
+
+                <th
+                  scope="col"
+                  className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                >
+                  <button className="flex items-center gap-x-2">
+                    <span>Mobile</span>
+                  </button>
+                </th>
+
+                <th
+                  scope="col"
+                  className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                >
+                  Address
+                </th>
+
+                <th
+                  scope="col"
+                  className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                >
+                  Role Type
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
+              {paginatedUsers.map((user, index) => (
+                <tr key={user.id || index}>
+                  <td className="px-4 py-4 text-sm whitespace-nowrap">
+                    <div className="flex items-center gap-x-6">
+                      <button
+                        onClick={() => handleDeleteClick(user.id)}
+                        className="text-gray-500 transition-colors duration-200 dark:hover:text-red-600 dark:text-gray-300 hover:text-red-500 focus:outline-none"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                          className="w-5 h-5"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                          />
+                        </svg>
+                      </button>
+
+                      <a
+                        href={`/admin/users/userform?id=${user.id}`}
+                        onClick={(e) => {
+                          e.preventDefault(); // Prevent default navigation
+                          handleEditClick(user.id); // Trigger the edit functionality
+                          window.location.href = `/admin/users/userform?id=${user.id}`; // Manually navigate
+                        }}
+                      >
+                        <button className="text-gray-500 transition-colors duration-200 dark:hover:text-yellow-500 dark:text-gray-300 hover:text-yellow-500 focus:outline-none">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth="1.5"
+                            stroke="currentColor"
+                            className="w-5 h-5"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                            />
+                          </svg>
+                        </button>
+                      </a>
+                    </div>
+                  </td>
+                  <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
+                    <div className="inline-flex items-center gap-x-3">
+                      <div className="flex items-center gap-x-2">
+                        <div>
+                          <h2 className="  text-sm font-medium text-gray-800 dark:text-white ">
+                            {user.name}
+                          </h2>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
+                    {user.email}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
+                    {user?.mobile || "Not Provided"}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
+                    {user?.address || "Not Provided"}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
+                    {user.roleType === "1" ? "Guest" : "Admin"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="flex items-center justify-between mt-6">
+          <button
+            onClick={handlePreviousPage}
+            disabled={currentPage === 1}
+            className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              className="w-5 h-5 rtl:-scale-x-100"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
+              />
+            </svg>
+
+            <span>previous</span>
+          </button>
+
+          <div className="items-center hidden lg:flex gap-x-3">
+            {Array.from({ length: totalPages }, (_, index) => (
+              <button
+                key={index + 1}
+                onClick={() => handlePageClick(index + 1)}
+                className={`px-2 py-1 text-sm ${
+                  currentPage === index + 1
+                    ? "text-blue-500 bg-blue-100"
+                    : "text-gray-500 hover:bg-gray-100"
+                } rounded-md`}
+              >
+                {index + 1}
+              </button>
+            ))}
+          </div>
+          <button
+            onClick={handleNextPage}
+            disabled={currentPage === totalPages}
+            className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
+          >
+            <span>Next</span>
+
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              className="w-5 h-5 rtl:-scale-x-100"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div className="flex-grow ml-0 mt-4 w-0">
+          {/* <a href="/admin/users/userform">
+            <button
+              type="button"
+              className="flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+            >
+              <FaPlus className="mr-2 font-medium" />
+              User
+            </button>
+          </a> */}
+          <button
+            type="button"
+            onClick={(event) =>
+              handleNavigation(event, "/admin/users/userform")
+            }
+            className="flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+          >
+            <FaPlus className="mr-2 font-medium" />
+            User
+          </button>
+        </div>
+      </div>
     </div>
   );
 }
 
 export default Users;
+
+// import React from "react";
+
+// function Users() {
+//   const handleNavigation = (event: React.MouseEvent, path: string) => {
+//     event.preventDefault();
+//     window.history.pushState({}, "", path);
+//     window.dispatchEvent(new PopStateEvent("popstate"));
+//   };
+
+//   return (
+//     <div>
+//       Users
+//       <button
+//         type="button"
+//         onClick={(event) => handleNavigation(event, "/admin/users/userform")}
+//         className="flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+//       >
+//         User
+//       </button>
+//     </div>
+//   );
+// }
+
+// export default Users;