Revert "pig update: decentralization, format date time"

This reverts commit 49b99289bb.

src/app/(admin)/(others-pages)/(tables)/user-table/page.tsx

@@ -15,7 +15,6 @@ import {
 import { useEffect, useState, useCallback } from "react";
 import Pagination from "@/components/tables/Pagination";
 import { LIMIT_ITEM_TABLE } from "../../../../../../constant";
-import { ProtectedRoute } from "@/components/auth/ProtectedRoute";
 
 export type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
 
@@ -33,9 +32,7 @@ const formatDateTimeToISO = (
 
 export default function UserTable() {
   const [page, setPage] = useState<number>(1);
-  const [limitInput, setLimitInput] = useState<string>(
-    LIMIT_ITEM_TABLE.toString(),
-  );
+  const [limitInput, setLimitInput] = useState<string>(LIMIT_ITEM_TABLE.toString());
 
   const [selectedRole, setSelectedRole] = useState<string>("");
   const [roles, setRoles] = useState<{ id: string; name: string }[]>([]);
@@ -146,6 +143,7 @@ export default function UserTable() {
         role_ids: selectedRole ? [selectedRole] : undefined,
       };
 
+      // Thêm format ngày giờ vào payload
       const createdFrom = formatDateTimeToISO(
         debouncedParams.fromDate,
         debouncedParams.fromTime,
@@ -187,7 +185,7 @@ export default function UserTable() {
   };
 
   const pagination = tableData?.pagination;
-
+  
   // console.log(pagination);
 
   const handleOpenDetail = (user: fullDataUser) => {
@@ -253,197 +251,192 @@ export default function UserTable() {
   };
 
   return (
-    <ProtectedRoute requiredRoles={["ADMIN", "MOD"]}>
-      <div>
-        <PageBreadcrumb pageTitle="Quản lý người dùng" />
-        <div className="space-y-6">
-          <ComponentCard
-            title="Bộ lọc tìm kiếm"
-            headerAction={
-              <button
-                onClick={handleReset}
-                className="flex items-center px-3 py-1.5 text-xs text-red-500 transition-colors border-red-100 dark:bg-red-500/10 dark:border-red-500/20 dark:hover:bg-red-500/20"
+    <div>
+      <PageBreadcrumb pageTitle="Quản lý người dùng" />
+      <div className="space-y-6">
+        <ComponentCard
+          title="Bộ lọc tìm kiếm"
+          headerAction={
+            <button
+              onClick={handleReset}
+              className="flex items-center px-3 py-1.5 text-xs text-red-500 transition-colors border-red-100 dark:bg-red-500/10 dark:border-red-500/20 dark:hover:bg-red-500/20"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-7 h-7"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="w-7 h-7"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2.5}
-                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                  />
-                </svg>
-              </button>
-            }
-          >
-            <div className="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-              <div>
-                <label className="block mb-2 text-sm font-medium">Search</label>
-                <input
-                  type="text"
-                  placeholder="Name, email..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2.5}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                 />
-              </div>
-
-              <div>
-                <label className="block mb-2 text-sm font-medium">
-                  Auth Provider
-                </label>
-                <select
-                  value={authProvider}
-                  onChange={(e) => setAuthProvider(e.target.value)}
-                  className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 cursor-pointer bg-white outline-none focus:border-brand-500"
-                >
-                  <option value="">Tất cả</option>
-                  <option value="google">Google</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block mb-2 text-sm font-medium">
-                  Trạng thái xóa
-                </label>
-                <select
-                  onChange={(e) =>
-                    setIsDeleted(
-                      e.target.value === ""
-                        ? undefined
-                        : e.target.value === "true",
-                    )
-                  }
-                  value={
-                    isDeleted === undefined ? "" : isDeleted ? "true" : "false"
-                  }
-                  className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500 cursor-pointer"
-                >
-                  <option value="">Tất cả</option>
-                  <option value="false">Hoạt động</option>
-                  <option value="true">Đã xóa</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block mb-2 text-sm font-medium">
-                  Từ ngày
-                </label>
-                <div className="flex gap-2">
-                  <input
-                    type="date"
-                    value={fromDate}
-                    onChange={(e) => setFromDate(e.target.value)}
-                    className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
-                  />
-                  <input
-                    type="time"
-                    value={fromTime}
-                    onChange={(e) => setFromTime(e.target.value)}
-                    className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block mb-2 text-sm font-medium">
-                  Đến ngày
-                </label>
-                <div className="flex gap-2">
-                  <input
-                    type="date"
-                    value={toDate}
-                    onChange={(e) => setToDate(e.target.value)}
-                    className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
-                  />
-                  <input
-                    type="time"
-                    value={toTime}
-                    onChange={(e) => setToTime(e.target.value)}
-                    className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block mb-2 text-sm font-medium">
-                  Số lượng (Limit)
-                </label>
-                <input
-                  type="number"
-                  value={limitInput}
-                  onChange={(e) => setLimitInput(e.target.value)}
-                  className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
-                />
-              </div>
-            </div>
-          </ComponentCard>
-
-          <ComponentCard title="Danh sách người dùng">
-            <div className="relative min-h-[300px]">
-              {loading && (
-                <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 rounded-xl">
-                  <div className="w-10 h-10 border-4 border-t-brand-500 rounded-full animate-spin"></div>
-                </div>
-              )}
-
-              <BasicTableOne
-                data={tableData?.data || []}
-                onSort={handleSort}
-                sortBy={sortBy}
-                sortOrder={sortOrder}
-                onViewDetail={handleOpenDetail}
-                roles={roles}
-                selectedRole={selectedRole}
-                onFilterRole={(role) => setSelectedRole(role)}
+              </svg>
+            </button>
+          }
+        >
+          <div className="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <div>
+              <label className="block mb-2 text-sm font-medium">Search</label>
+              <input
+                type="text"
+                placeholder="Name, email..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
               />
             </div>
 
-            <div className="flex items-center justify-between mt-6">
-              <p className="text-sm text-gray-500">
-                Hiển thị trang {pagination?.current_page || 1} /{" "}
-                {pagination?.total_pages || 1} ({pagination?.total_records || 0}{" "}
-                kết quả)
-              </p>
-
-              {pagination && pagination.total_pages > 1 && (
-                <Pagination
-                  currentPage={pagination.current_page}
-                  totalPages={pagination.total_pages}
-                  onPageChange={(newPage) => setPage(newPage)}
-                />
-              )}
+            <div>
+              <label className="block mb-2 text-sm font-medium">
+                Auth Provider
+              </label>
+              <select
+                value={authProvider}
+                onChange={(e) => setAuthProvider(e.target.value)}
+                className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 cursor-pointer bg-white outline-none focus:border-brand-500"
+              >
+                <option value="">Tất cả</option>
+                <option value="google">Google</option>
+              </select>
             </div>
 
-            <UserDetailModal
-              isOpen={isModalOpen}
-              onClose={() => setIsModalOpen(false)}
-              user={selectedUser}
-              onChangeRole={handleOpenRoleModal}
-              onDelete={(u) => {
-                handleDelete(u);
-                setIsModalOpen(false);
-              }}
-              onRestore={(u) => {
-                handleRestore(u);
-                setIsModalOpen(false);
-              }}
-            />
+            <div>
+              <label className="block mb-2 text-sm font-medium">
+                Trạng thái xóa
+              </label>
+              <select
+                onChange={(e) =>
+                  setIsDeleted(
+                    e.target.value === ""
+                      ? undefined
+                      : e.target.value === "true",
+                  )
+                }
+                value={isDeleted === undefined ? "" : isDeleted ? "true" : "false"}
+                className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500 cursor-pointer"
+              >
+                <option value="">Tất cả</option>
+                <option value="false">Hoạt động</option>
+                <option value="true">Đã xóa</option>
+              </select>
+            </div>
 
-            <ChangeRoleModal
-              isOpen={isRoleModalOpen}
-              onClose={() => setIsRoleModalOpen(false)}
-              user={roleUser}
-              onSuccess={fetchUsers}
+            {/* Từ ngày */}
+            <div>
+              <label className="block mb-2 text-sm font-medium">Từ ngày</label>
+              <div className="flex gap-2">
+                <input
+                  type="date"
+                  value={fromDate}
+                  onChange={(e) => setFromDate(e.target.value)}
+                  className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
+                />
+                <input
+                  type="time"
+                  value={fromTime}
+                  onChange={(e) => setFromTime(e.target.value)}
+                  className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
+                />
+              </div>
+            </div>
+
+            {/* Đến ngày */}
+            <div>
+              <label className="block mb-2 text-sm font-medium">Đến ngày</label>
+              <div className="flex gap-2">
+                <input
+                  type="date"
+                  value={toDate}
+                  onChange={(e) => setToDate(e.target.value)}
+                  className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
+                />
+                <input
+                  type="time"
+                  value={toTime}
+                  onChange={(e) => setToTime(e.target.value)}
+                  className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
+                />
+              </div>
+            </div>
+
+            {/* Limit */}
+            <div>
+              <label className="block mb-2 text-sm font-medium">
+                Số lượng (Limit)
+              </label>
+              <input
+                type="number"
+                value={limitInput}
+                onChange={(e) => setLimitInput(e.target.value)}
+                className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
+              />
+            </div>
+          </div>
+        </ComponentCard>
+
+        <ComponentCard title="Danh sách người dùng">
+          <div className="relative min-h-[300px]">
+            {loading && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 rounded-xl">
+                <div className="w-10 h-10 border-4 border-t-brand-500 rounded-full animate-spin"></div>
+              </div>
+            )}
+
+            <BasicTableOne
+              data={tableData?.data || []}
+              onSort={handleSort}
+              sortBy={sortBy}
+              sortOrder={sortOrder}
+              onViewDetail={handleOpenDetail}
+              roles={roles}
+              selectedRole={selectedRole}
+              onFilterRole={(role) => setSelectedRole(role)}
             />
-          </ComponentCard>
-        </div>
+          </div>
+
+          <div className="flex items-center justify-between mt-6">
+            <p className="text-sm text-gray-500">
+              Hiển thị trang {pagination?.current_page || 1} /{" "}
+              {pagination?.total_pages || 1} ({pagination?.total_records || 0}{" "}
+              kết quả)
+            </p>
+
+            {pagination && pagination.total_pages > 1 && (
+              <Pagination
+                currentPage={pagination.current_page}
+                totalPages={pagination.total_pages}
+                onPageChange={(newPage) => setPage(newPage)}
+              />
+            )}
+          </div>
+
+          <UserDetailModal
+            isOpen={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+            user={selectedUser}
+            onChangeRole={handleOpenRoleModal}
+            onDelete={(u) => {
+              handleDelete(u);
+              setIsModalOpen(false);
+            }}
+            onRestore={(u) => {
+              handleRestore(u);
+              setIsModalOpen(false);
+            }}
+          />
+
+          <ChangeRoleModal
+            isOpen={isRoleModalOpen}
+            onClose={() => setIsRoleModalOpen(false)}
+            user={roleUser}
+            onSuccess={fetchUsers}
+          />
+        </ComponentCard>
       </div>
-    </ProtectedRoute>
+    </div>
   );
-}
+}