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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/dist/components/admin/Users.js +72 -1
  2. package/package.json +1 -1
  3. package/src/components/admin/Users.tsx +364 -362
package/dist/components/admin/Users.js CHANGED
@@ -1,10 +1,81 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
1
10
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
+ import { useState, useEffect } from "react";
12
+ import { FaPlus } from "react-icons/fa";
13
+ import { fetchUsersApi, deleteUserApi } from "../api/user";
2
14
  function Users() {
15
+ const [users, setUsers] = useState([]);
16
+ const fetchUsersData = () => __awaiter(this, void 0, void 0, function* () {
17
+ const data = yield fetchUsersApi();
18
+ if (data) {
19
+ setUsers(data);
20
+ }
21
+ else {
22
+ console.error("Failed to fetch users");
23
+ }
24
+ });
25
+ useEffect(() => {
26
+ fetchUsersData();
27
+ }, []);
28
+ // const handleNav = (e: React.FormEvent) => {
29
+ // e.preventDefault();
30
+ // window.history.pushState({}, "", "/admin/users/userform");
31
+ // // Trigger React's routing logic manually if required
32
+ // const navEvent = new PopStateEvent("popstate");
33
+ // window.dispatchEvent(navEvent);
34
+ // };
3
35
  const handleNavigation = (event, path) => {
4
36
  event.preventDefault();
5
37
  window.history.pushState({}, "", path);
6
38
  window.dispatchEvent(new PopStateEvent("popstate"));
7
39
  };
8
- return (_jsxs("div", { children: ["Users", _jsx("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: "User" })] }));
40
+ const [currentPage, setCurrentPage] = useState(1);
41
+ const itemsPerPage = 10;
42
+ const totalPages = Math.ceil(users.length / itemsPerPage);
43
+ const handleNextPage = () => {
44
+ if (currentPage < totalPages) {
45
+ setCurrentPage(currentPage + 1);
46
+ }
47
+ };
48
+ const handlePreviousPage = () => {
49
+ if (currentPage > 1) {
50
+ setCurrentPage(currentPage - 1);
51
+ }
52
+ };
53
+ const handlePageClick = (pageNumber) => {
54
+ setCurrentPage(pageNumber);
55
+ };
56
+ const paginatedUsers = users.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
57
+ const handleDeleteClick = (id) => __awaiter(this, void 0, void 0, function* () {
58
+ try {
59
+ yield deleteUserApi(id);
60
+ alert("User deleted successfully");
61
+ fetchUsersData();
62
+ }
63
+ catch (error) {
64
+ console.error("Error deleting User:", error);
65
+ }
66
+ });
67
+ // const handleEditClick = (id: string) => {
68
+ // navigate("/admin/user/userform", { state: { id } });
69
+ // };
70
+ const handleEditClick = (id) => {
71
+ return (_jsx("a", { href: `/admin/users/userform?id=${id}`, onClick: (e) => e.preventDefault(), children: "Edit User" }));
72
+ };
73
+ 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) => {
74
+ e.preventDefault(); // Prevent default navigation
75
+ handleEditClick(user.id); // Trigger the edit functionality
76
+ window.location.href = `/admin/users/userform?id=${user.id}`; // Manually navigate
77
+ }, 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
78
+ ? "text-blue-500 bg-blue-100"
79
+ : "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"] }) })] })] }));
9
80
  }
10
81
  export default Users;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eleven-solutions-common-website-unique-web",
3
- "version": "2.0.2",
3
+ "version": "2.0.3",
4
4
  "main": "./dist/index.js",
5
5
  "scripts": {
6
6
  "build": "tsc",
package/src/components/admin/Users.tsx CHANGED
@@ -1,386 +1,388 @@
1
- // import React from "react";
2
- // import { useState, useEffect } from "react";
3
-
4
- // import { FaPlus } from "react-icons/fa";
5
-
6
- // import { fetchUsersApi, deleteUserApi } from "../api/user";
7
-
8
- // function Users() {
9
- // const [users, setUsers] = useState<any[]>([]);
10
-
11
- // const fetchUsersData = async () => {
12
- // const data = await fetchUsersApi();
13
- // if (data) {
14
- // setUsers(data as any[]);
15
- // } else {
16
- // console.error("Failed to fetch users");
17
- // }
18
- // };
19
-
20
- // useEffect(() => {
21
- // fetchUsersData();
22
- // }, []);
23
- // // const handleNav = (e: React.FormEvent) => {
24
- // // e.preventDefault();
25
- // // window.history.pushState({}, "", "/admin/users/userform");
1
+ import React from "react";
2
+ import { useState, useEffect } from "react";
26
3
 
27
- // // // Trigger React's routing logic manually if required
28
- // // const navEvent = new PopStateEvent("popstate");
29
- // // window.dispatchEvent(navEvent);
30
- // // };
4
+ import { FaPlus } from "react-icons/fa";
31
5
 
32
- // const handleNavigation = (event: React.MouseEvent, path: string) => {
33
- // event.preventDefault();
34
- // window.history.pushState({}, "", path);
35
- // window.dispatchEvent(new PopStateEvent("popstate"));
36
- // };
6
+ import { fetchUsersApi, deleteUserApi } from "../api/user";
37
7
 
38
- // const [currentPage, setCurrentPage] = useState(1);
39
- // const itemsPerPage = 10;
8
+ function Users() {
9
+ const [users, setUsers] = useState<any[]>([]);
10
+
11
+ const fetchUsersData = async () => {
12
+ const data = await fetchUsersApi();
13
+ if (data) {
14
+ setUsers(data as any[]);
15
+ } else {
16
+ console.error("Failed to fetch users");
17
+ }
18
+ };
40
19
 
41
- // const totalPages = Math.ceil(users.length / itemsPerPage);
20
+ useEffect(() => {
21
+ fetchUsersData();
22
+ }, []);
23
+ // const handleNav = (e: React.FormEvent) => {
24
+ // e.preventDefault();
25
+ // window.history.pushState({}, "", "/admin/users/userform");
42
26
 
43
- // const handleNextPage = () => {
44
- // if (currentPage < totalPages) {
45
- // setCurrentPage(currentPage + 1);
46
- // }
47
- // };
27
+ // // Trigger React's routing logic manually if required
28
+ // const navEvent = new PopStateEvent("popstate");
29
+ // window.dispatchEvent(navEvent);
30
+ // };
48
31
 
49
- // const handlePreviousPage = () => {
50
- // if (currentPage > 1) {
51
- // setCurrentPage(currentPage - 1);
52
- // }
53
- // };
32
+ const handleNavigation = (event: React.MouseEvent, path: string) => {
33
+ event.preventDefault();
34
+ window.history.pushState({}, "", path);
35
+ window.dispatchEvent(new PopStateEvent("popstate"));
36
+ };
54
37
 
55
- // const handlePageClick = (pageNumber: number) => {
56
- // setCurrentPage(pageNumber);
57
- // };
38
+ const [currentPage, setCurrentPage] = useState(1);
39
+ const itemsPerPage = 10;
58
40
 
59
- // const paginatedUsers = users.slice(
60
- // (currentPage - 1) * itemsPerPage,
61
- // currentPage * itemsPerPage
62
- // );
41
+ const totalPages = Math.ceil(users.length / itemsPerPage);
63
42
 
64
- // const handleDeleteClick = async (id: string) => {
65
- // try {
66
- // await deleteUserApi(id);
67
- // alert("User deleted successfully");
43
+ const handleNextPage = () => {
44
+ if (currentPage < totalPages) {
45
+ setCurrentPage(currentPage + 1);
46
+ }
47
+ };
68
48
 
69
- // fetchUsersData();
70
- // } catch (error) {
71
- // console.error("Error deleting User:", error);
72
- // }
73
- // };
49
+ const handlePreviousPage = () => {
50
+ if (currentPage > 1) {
51
+ setCurrentPage(currentPage - 1);
52
+ }
53
+ };
74
54
 
75
- // // const handleEditClick = (id: string) => {
76
- // // navigate("/admin/user/userform", { state: { id } });
77
- // // };
55
+ const handlePageClick = (pageNumber: number) => {
56
+ setCurrentPage(pageNumber);
57
+ };
78
58
 
79
- // const handleEditClick = (id: string) => {
80
- // return (
81
- // <a
82
- // href={`/admin/users/userform?id=${id}`}
83
- // onClick={(e) => e.preventDefault()}
84
- // >
85
- // Edit User
86
- // </a>
87
- // );
88
- // };
59
+ const paginatedUsers = users.slice(
60
+ (currentPage - 1) * itemsPerPage,
61
+ currentPage * itemsPerPage
62
+ );
89
63
 
90
- // return (
91
- // <div className="container px-4 mx-auto mt-6">
92
- // <div className="w-3/4">
93
- // <h1 className="text-3xl font-bold text-blue-600 mb-5">Users</h1>
94
- // </div>
95
- // <div className="flex-grow ml-0 w-full mt-10">
96
- // <form className="w-full ">
97
- // <label
98
- // htmlFor="default-search"
99
- // className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
100
- // >
101
- // Search
102
- // </label>
103
- // <div className="relative w-full">
104
- // <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
105
- // <svg
106
- // className="w-4 h-4 text-gray-500 dark:text-gray-400"
107
- // aria-hidden="true"
108
- // xmlns="http://www.w3.org/2000/svg"
109
- // fill="none"
110
- // viewBox="0 0 20 20"
111
- // >
112
- // <path
113
- // stroke="currentColor"
114
- // stroke-linecap="round"
115
- // stroke-linejoin="round"
116
- // stroke-width="2"
117
- // d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
118
- // />
119
- // </svg>
120
- // </div>
121
- // <input
122
- // type="search"
123
- // id="default-search"
124
- // 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"
125
- // placeholder="Search Users"
126
- // required
127
- // />
128
- // <button
129
- // type="submit"
130
- // 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"
131
- // >
132
- // Search
133
- // </button>
134
- // </div>
135
- // </form>
136
- // </div>
137
- // <div className="flex-grow ml-0 w-3/4">
138
- // <form className="w-auto">{/* Search Form */}</form>
139
- // </div>
140
- // <div className="flex-grow ml-0 mt-4 w-full">
141
- // <div className="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg mt-6">
142
- // <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
143
- // <thead className="bg-gray-50 dark:bg-gray-800">
144
- // <tr>
145
- // <th
146
- // scope="col"
147
- // className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
148
- // >
149
- // Edit/Delete
150
- // </th>
151
- // <th
152
- // scope="col"
153
- // className="py-3.5 px-4 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
154
- // >
155
- // <div className="flex items-center gap-x-3">
156
- // <span>Name</span>
157
- // </div>
158
- // </th>
159
-
160
- // <th
161
- // scope="col"
162
- // className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
163
- // >
164
- // <button className="flex items-center gap-x-2">
165
- // <span>Email</span>
166
- // </button>
167
- // </th>
168
-
169
- // <th
170
- // scope="col"
171
- // className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
172
- // >
173
- // <button className="flex items-center gap-x-2">
174
- // <span>Mobile</span>
175
- // </button>
176
- // </th>
177
-
178
- // <th
179
- // scope="col"
180
- // className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
181
- // >
182
- // Address
183
- // </th>
184
-
185
- // <th
186
- // scope="col"
187
- // className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
188
- // >
189
- // Role Type
190
- // </th>
191
- // </tr>
192
- // </thead>
193
- // <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
194
- // {paginatedUsers.map((user, index) => (
195
- // <tr key={user.id || index}>
196
- // <td className="px-4 py-4 text-sm whitespace-nowrap">
197
- // <div className="flex items-center gap-x-6">
198
- // <button
199
- // onClick={() => handleDeleteClick(user.id)}
200
- // className="text-gray-500 transition-colors duration-200 dark:hover:text-red-600 dark:text-gray-300 hover:text-red-500 focus:outline-none"
201
- // >
202
- // <svg
203
- // xmlns="http://www.w3.org/2000/svg"
204
- // fill="none"
205
- // viewBox="0 0 24 24"
206
- // stroke-width="1.5"
207
- // stroke="currentColor"
208
- // className="w-5 h-5"
209
- // >
210
- // <path
211
- // stroke-linecap="round"
212
- // stroke-linejoin="round"
213
- // 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"
214
- // />
215
- // </svg>
216
- // </button>
217
-
218
- // <a
219
- // href={`/admin/users/userform?id=${user.id}`}
220
- // onClick={(e) => {
221
- // e.preventDefault(); // Prevent default navigation
222
- // handleEditClick(user.id); // Trigger the edit functionality
223
- // window.location.href = `/admin/users/userform?id=${user.id}`; // Manually navigate
224
- // }}
225
- // >
226
- // <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">
227
- // <svg
228
- // xmlns="http://www.w3.org/2000/svg"
229
- // fill="none"
230
- // viewBox="0 0 24 24"
231
- // strokeWidth="1.5"
232
- // stroke="currentColor"
233
- // className="w-5 h-5"
234
- // >
235
- // <path
236
- // strokeLinecap="round"
237
- // strokeLinejoin="round"
238
- // 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"
239
- // />
240
- // </svg>
241
- // </button>
242
- // </a>
243
- // </div>
244
- // </td>
245
- // <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
246
- // <div className="inline-flex items-center gap-x-3">
247
- // <div className="flex items-center gap-x-2">
248
- // <div>
249
- // <h2 className=" text-sm font-medium text-gray-800 dark:text-white ">
250
- // {user.name}
251
- // </h2>
252
- // </div>
253
- // </div>
254
- // </div>
255
- // </td>
256
- // <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
257
- // {user.email}
258
- // </td>
259
- // <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
260
- // {user?.mobile || "Not Provided"}
261
- // </td>
262
- // <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
263
- // {user?.address || "Not Provided"}
264
- // </td>
265
- // <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
266
- // {user.roleType === "1" ? "Guest" : "Admin"}
267
- // </td>
268
- // </tr>
269
- // ))}
270
- // </tbody>
271
- // </table>
272
- // </div>
273
-
274
- // <div className="flex items-center justify-between mt-6">
275
- // <button
276
- // onClick={handlePreviousPage}
277
- // disabled={currentPage === 1}
278
- // 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"
279
- // >
280
- // <svg
281
- // xmlns="http://www.w3.org/2000/svg"
282
- // fill="none"
283
- // viewBox="0 0 24 24"
284
- // stroke-width="1.5"
285
- // stroke="currentColor"
286
- // className="w-5 h-5 rtl:-scale-x-100"
287
- // >
288
- // <path
289
- // stroke-linecap="round"
290
- // stroke-linejoin="round"
291
- // d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
292
- // />
293
- // </svg>
294
-
295
- // <span>previous</span>
296
- // </button>
297
-
298
- // <div className="items-center hidden lg:flex gap-x-3">
299
- // {Array.from({ length: totalPages }, (_, index) => (
300
- // <button
301
- // key={index + 1}
302
- // onClick={() => handlePageClick(index + 1)}
303
- // className={`px-2 py-1 text-sm ${
304
- // currentPage === index + 1
305
- // ? "text-blue-500 bg-blue-100"
306
- // : "text-gray-500 hover:bg-gray-100"
307
- // } rounded-md`}
308
- // >
309
- // {index + 1}
310
- // </button>
311
- // ))}
312
- // </div>
313
- // <button
314
- // onClick={handleNextPage}
315
- // disabled={currentPage === totalPages}
316
- // 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"
317
- // >
318
- // <span>Next</span>
319
-
320
- // <svg
321
- // xmlns="http://www.w3.org/2000/svg"
322
- // fill="none"
323
- // viewBox="0 0 24 24"
324
- // stroke-width="1.5"
325
- // stroke="currentColor"
326
- // className="w-5 h-5 rtl:-scale-x-100"
327
- // >
328
- // <path
329
- // stroke-linecap="round"
330
- // stroke-linejoin="round"
331
- // d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
332
- // />
333
- // </svg>
334
- // </button>
335
- // </div>
336
-
337
- // <div className="flex-grow ml-0 mt-4 w-0">
338
- // {/* <a href="/admin/users/userform">
339
- // <button
340
- // type="button"
341
- // 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"
342
- // >
343
- // <FaPlus className="mr-2 font-medium" />
344
- // User
345
- // </button>
346
- // </a> */}
347
- // <button
348
- // type="button"
349
- // onClick={(event) => handleNavigation(event, "users/userform")}
350
- // 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"
351
- // >
352
- // <FaPlus className="mr-2 font-medium" />
353
- // User
354
- // </button>
355
- // </div>
356
- // </div>
357
- // </div>
358
- // );
359
- // }
64
+ const handleDeleteClick = async (id: string) => {
65
+ try {
66
+ await deleteUserApi(id);
67
+ alert("User deleted successfully");
360
68
 
361
- // export default Users;
69
+ fetchUsersData();
70
+ } catch (error) {
71
+ console.error("Error deleting User:", error);
72
+ }
73
+ };
362
74
 
363
- import React from "react";
75
+ // const handleEditClick = (id: string) => {
76
+ // navigate("/admin/user/userform", { state: { id } });
77
+ // };
364
78
 
365
- function Users() {
366
- const handleNavigation = (event: React.MouseEvent, path: string) => {
367
- event.preventDefault();
368
- window.history.pushState({}, "", path);
369
- window.dispatchEvent(new PopStateEvent("popstate"));
79
+ const handleEditClick = (id: string) => {
80
+ return (
81
+ <a
82
+ href={`/admin/users/userform?id=${id}`}
83
+ onClick={(e) => e.preventDefault()}
84
+ >
85
+ Edit User
86
+ </a>
87
+ );
370
88
  };
371
89
 
372
90
  return (
373
- <div>
374
- Users
375
- <button
376
- type="button"
377
- onClick={(event) => handleNavigation(event, "/admin/users/userform")}
378
- 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"
379
- >
380
- User
381
- </button>
91
+ <div className="container px-4 mx-auto mt-6">
92
+ <div className="w-3/4">
93
+ <h1 className="text-3xl font-bold text-blue-600 mb-5">Users</h1>
94
+ </div>
95
+ <div className="flex-grow ml-0 w-full mt-10">
96
+ <form className="w-full ">
97
+ <label
98
+ htmlFor="default-search"
99
+ className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
100
+ >
101
+ Search
102
+ </label>
103
+ <div className="relative w-full">
104
+ <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
105
+ <svg
106
+ className="w-4 h-4 text-gray-500 dark:text-gray-400"
107
+ aria-hidden="true"
108
+ xmlns="http://www.w3.org/2000/svg"
109
+ fill="none"
110
+ viewBox="0 0 20 20"
111
+ >
112
+ <path
113
+ stroke="currentColor"
114
+ stroke-linecap="round"
115
+ stroke-linejoin="round"
116
+ stroke-width="2"
117
+ d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
118
+ />
119
+ </svg>
120
+ </div>
121
+ <input
122
+ type="search"
123
+ id="default-search"
124
+ 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"
125
+ placeholder="Search Users"
126
+ required
127
+ />
128
+ <button
129
+ type="submit"
130
+ 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"
131
+ >
132
+ Search
133
+ </button>
134
+ </div>
135
+ </form>
136
+ </div>
137
+ <div className="flex-grow ml-0 w-3/4">
138
+ <form className="w-auto">{/* Search Form */}</form>
139
+ </div>
140
+ <div className="flex-grow ml-0 mt-4 w-full">
141
+ <div className="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg mt-6">
142
+ <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
143
+ <thead className="bg-gray-50 dark:bg-gray-800">
144
+ <tr>
145
+ <th
146
+ scope="col"
147
+ className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
148
+ >
149
+ Edit/Delete
150
+ </th>
151
+ <th
152
+ scope="col"
153
+ className="py-3.5 px-4 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
154
+ >
155
+ <div className="flex items-center gap-x-3">
156
+ <span>Name</span>
157
+ </div>
158
+ </th>
159
+
160
+ <th
161
+ scope="col"
162
+ className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
163
+ >
164
+ <button className="flex items-center gap-x-2">
165
+ <span>Email</span>
166
+ </button>
167
+ </th>
168
+
169
+ <th
170
+ scope="col"
171
+ className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
172
+ >
173
+ <button className="flex items-center gap-x-2">
174
+ <span>Mobile</span>
175
+ </button>
176
+ </th>
177
+
178
+ <th
179
+ scope="col"
180
+ className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
181
+ >
182
+ Address
183
+ </th>
184
+
185
+ <th
186
+ scope="col"
187
+ className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
188
+ >
189
+ Role Type
190
+ </th>
191
+ </tr>
192
+ </thead>
193
+ <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
194
+ {paginatedUsers.map((user, index) => (
195
+ <tr key={user.id || index}>
196
+ <td className="px-4 py-4 text-sm whitespace-nowrap">
197
+ <div className="flex items-center gap-x-6">
198
+ <button
199
+ onClick={() => handleDeleteClick(user.id)}
200
+ className="text-gray-500 transition-colors duration-200 dark:hover:text-red-600 dark:text-gray-300 hover:text-red-500 focus:outline-none"
201
+ >
202
+ <svg
203
+ xmlns="http://www.w3.org/2000/svg"
204
+ fill="none"
205
+ viewBox="0 0 24 24"
206
+ stroke-width="1.5"
207
+ stroke="currentColor"
208
+ className="w-5 h-5"
209
+ >
210
+ <path
211
+ stroke-linecap="round"
212
+ stroke-linejoin="round"
213
+ 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"
214
+ />
215
+ </svg>
216
+ </button>
217
+
218
+ <a
219
+ href={`/admin/users/userform?id=${user.id}`}
220
+ onClick={(e) => {
221
+ e.preventDefault(); // Prevent default navigation
222
+ handleEditClick(user.id); // Trigger the edit functionality
223
+ window.location.href = `/admin/users/userform?id=${user.id}`; // Manually navigate
224
+ }}
225
+ >
226
+ <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">
227
+ <svg
228
+ xmlns="http://www.w3.org/2000/svg"
229
+ fill="none"
230
+ viewBox="0 0 24 24"
231
+ strokeWidth="1.5"
232
+ stroke="currentColor"
233
+ className="w-5 h-5"
234
+ >
235
+ <path
236
+ strokeLinecap="round"
237
+ strokeLinejoin="round"
238
+ 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"
239
+ />
240
+ </svg>
241
+ </button>
242
+ </a>
243
+ </div>
244
+ </td>
245
+ <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
246
+ <div className="inline-flex items-center gap-x-3">
247
+ <div className="flex items-center gap-x-2">
248
+ <div>
249
+ <h2 className=" text-sm font-medium text-gray-800 dark:text-white ">
250
+ {user.name}
251
+ </h2>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </td>
256
+ <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
257
+ {user.email}
258
+ </td>
259
+ <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
260
+ {user?.mobile || "Not Provided"}
261
+ </td>
262
+ <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
263
+ {user?.address || "Not Provided"}
264
+ </td>
265
+ <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
266
+ {user.roleType === "1" ? "Guest" : "Admin"}
267
+ </td>
268
+ </tr>
269
+ ))}
270
+ </tbody>
271
+ </table>
272
+ </div>
273
+
274
+ <div className="flex items-center justify-between mt-6">
275
+ <button
276
+ onClick={handlePreviousPage}
277
+ disabled={currentPage === 1}
278
+ 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"
279
+ >
280
+ <svg
281
+ xmlns="http://www.w3.org/2000/svg"
282
+ fill="none"
283
+ viewBox="0 0 24 24"
284
+ stroke-width="1.5"
285
+ stroke="currentColor"
286
+ className="w-5 h-5 rtl:-scale-x-100"
287
+ >
288
+ <path
289
+ stroke-linecap="round"
290
+ stroke-linejoin="round"
291
+ d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
292
+ />
293
+ </svg>
294
+
295
+ <span>previous</span>
296
+ </button>
297
+
298
+ <div className="items-center hidden lg:flex gap-x-3">
299
+ {Array.from({ length: totalPages }, (_, index) => (
300
+ <button
301
+ key={index + 1}
302
+ onClick={() => handlePageClick(index + 1)}
303
+ className={`px-2 py-1 text-sm ${
304
+ currentPage === index + 1
305
+ ? "text-blue-500 bg-blue-100"
306
+ : "text-gray-500 hover:bg-gray-100"
307
+ } rounded-md`}
308
+ >
309
+ {index + 1}
310
+ </button>
311
+ ))}
312
+ </div>
313
+ <button
314
+ onClick={handleNextPage}
315
+ disabled={currentPage === totalPages}
316
+ 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"
317
+ >
318
+ <span>Next</span>
319
+
320
+ <svg
321
+ xmlns="http://www.w3.org/2000/svg"
322
+ fill="none"
323
+ viewBox="0 0 24 24"
324
+ stroke-width="1.5"
325
+ stroke="currentColor"
326
+ className="w-5 h-5 rtl:-scale-x-100"
327
+ >
328
+ <path
329
+ stroke-linecap="round"
330
+ stroke-linejoin="round"
331
+ d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
332
+ />
333
+ </svg>
334
+ </button>
335
+ </div>
336
+
337
+ <div className="flex-grow ml-0 mt-4 w-0">
338
+ {/* <a href="/admin/users/userform">
339
+ <button
340
+ type="button"
341
+ 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"
342
+ >
343
+ <FaPlus className="mr-2 font-medium" />
344
+ User
345
+ </button>
346
+ </a> */}
347
+ <button
348
+ type="button"
349
+ onClick={(event) =>
350
+ handleNavigation(event, "/admin/users/userform")
351
+ }
352
+ 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"
353
+ >
354
+ <FaPlus className="mr-2 font-medium" />
355
+ User
356
+ </button>
357
+ </div>
358
+ </div>
382
359
  </div>
383
360
  );
384
361
  }
385
362
 
386
363
  export default Users;
364
+
365
+ // import React from "react";
366
+
367
+ // function Users() {
368
+ // const handleNavigation = (event: React.MouseEvent, path: string) => {
369
+ // event.preventDefault();
370
+ // window.history.pushState({}, "", path);
371
+ // window.dispatchEvent(new PopStateEvent("popstate"));
372
+ // };
373
+
374
+ // return (
375
+ // <div>
376
+ // Users
377
+ // <button
378
+ // type="button"
379
+ // onClick={(event) => handleNavigation(event, "/admin/users/userform")}
380
+ // 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"
381
+ // >
382
+ // User
383
+ // </button>
384
+ // </div>
385
+ // );
386
+ // }
387
+
388
+ // export default Users;