Revert "pig update: decentralization, format date time"

This reverts commit 49b99289bb.

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

@@ -5,7 +5,6 @@ import ComponentCard from "@/components/common/ComponentCard";
 import PageBreadcrumb from "@/components/common/PageBreadCrumb";
 import Pagination from "@/components/tables/Pagination";
 import Swal from "sweetalert2";
-import { ProtectedRoute } from "@/components/auth/ProtectedRoute";
 
 import ApplicationTable, {
   AppSortColumn,
@@ -191,9 +190,8 @@ export default function HistorianApplicationPage() {
   console.log(tableData)
   // console.log("Pagination info:", pagination);
   return (
-    <ProtectedRoute requiredRoles={["ADMIN", "MOD", "HISTORIAN"]}>
-      <div>
-        <PageBreadcrumb pageTitle="Quản lý hồ sơ" />
+    <div>
+      <PageBreadcrumb pageTitle="Quản lý hồ sơ" />
 
       <div className="space-y-6">
         <ComponentCard
@@ -220,6 +218,7 @@ export default function HistorianApplicationPage() {
             </button>
           }
         >
+          {/* Cập nhật Grid để chứa đủ các ô filter */}
           <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">Tìm kiếm</label>
@@ -355,6 +354,5 @@ export default function HistorianApplicationPage() {
         onRefresh={fetchApplications}
       />
     </div>
-    </ProtectedRoute>
   );
 }

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>
   );
-}
+}

src/app/(admin)/(others-pages)/profile/applications/page.tsx

@@ -38,18 +38,6 @@ export default function ApplicationDetailPage() {
 
   const config = statusConfig[application.status] || statusConfig.PENDING;
 
-  const formatDate = (dateString: string | null | undefined) => {
-    if (!dateString) return "-";
-    const date = new Date(dateString);
-    return date.toLocaleDateString("vi-VN", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  };
-
   const isImageFile = (file: any) => {
     const isImageMime = file.mime_type?.startsWith("image/");
     const isImageExt = /\.(jpg|jpeg|png|webp|gif)$/i.test(file.storage_key);
@@ -226,57 +214,55 @@ export default function ApplicationDetailPage() {
             </div>
           )}
 
-        {application?.reviewer && (
-          <section className="pt-8 border-t border-zinc-200 dark:border-zinc-800">
-            <label className="text-[11px] font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-3 block">
-              Phản hồi từ người kiểm duyệt
-            </label>
+       {application?.reviewer && (
+  <section className="pt-8 border-t border-zinc-200 dark:border-zinc-800">
+    <label className="text-[11px] font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-3 block">
+      Phản hồi từ người kiểm duyệt
+    </label>
 
-            <div className="p-5 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
-              <div className="flex items-start justify-between mb-5">
-                <div className="flex items-center gap-3">
-                  {application?.reviewer?.avatar_url ? (
-                    <Image
-                      src={application.reviewer.avatar_url}
-                      alt={application.reviewer.display_name || "Avatar"}
-                      width={36}
-                      height={36}
-                      className="w-9 h-9 rounded-full object-cover border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800"
-                    />
-                  ) : (
-                    <div className="w-9 h-9 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center text-zinc-500 font-medium text-sm">
-                      {application?.reviewer?.display_name?.charAt(0) || "R"}
-                    </div>
-                  )}
-
-                  <div>
-                    <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
-                      {application?.reviewer?.display_name}
-                    </h4>
-                    <p className="text-[11px] text-zinc-500 dark:text-zinc-400">
-                      {application?.reviewer?.email}
-                    </p>
-                  </div>
-                </div>
-                <span className="text-[11px] text-zinc-400 dark:text-zinc-500 tabular-nums">
-                  {formatDate(application?.reviewed_at)}
-                </span>
-              </div>
-
-              <div className="relative ml-4 pl-4 border-l border-zinc-300 dark:border-zinc-700">
-                <div className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed">
-                  {application?.review_note ? (
-                    <p>{application.review_note}</p>
-                  ) : (
-                    <p className="italic text-zinc-500">
-                      Không có ghi chú bổ sung.
-                    </p>
-                  )}
-                </div>
-              </div>
+    <div className="p-5 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
+      <div className="flex items-start justify-between mb-5">
+        <div className="flex items-center gap-3">
+          {application?.reviewer?.avatar_url ? (
+            <Image
+              src={application.reviewer.avatar_url}
+              alt={application.reviewer.display_name || "Avatar"}
+              width={36}
+              height={36}
+              className="w-9 h-9 rounded-full object-cover border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800"
+            />
+          ) : (
+            <div className="w-9 h-9 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center text-zinc-500 font-medium text-sm">
+              {application?.reviewer?.display_name?.charAt(0) || "R"}
             </div>
-          </section>
-        )}
+          )}
+          
+          <div>
+            <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+              {application?.reviewer?.display_name}
+            </h4>
+            <p className="text-[11px] text-zinc-500 dark:text-zinc-400">
+              {application?.reviewer?.email}
+            </p>
+          </div>
+        </div>
+        <span className="text-[11px] text-zinc-400 dark:text-zinc-500 tabular-nums">
+          {application?.reviewed_at}
+        </span>
+      </div>
+
+      <div className="relative ml-4 pl-4 border-l border-zinc-300 dark:border-zinc-700">
+        <div className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed">
+          {application?.review_note ? (
+            <p>{application.review_note}</p>
+          ) : (
+            <p className="italic text-zinc-500">Không có ghi chú bổ sung.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  </section>
+)}
       </div>
 
       <Lightbox

src/app/(full-width-pages)/(error-pages)/error-403/page.tsx

@@ -1,53 +0,0 @@
-import GridShape from "@/components/common/GridShape";
-import { Metadata } from "next";
-import Image from "next/image";
-import Link from "next/link";
-import React from "react";
-
-export const metadata: Metadata = {
-  title: "Access Denied - 403 | Admin Dashboard",
-  description:
-    "This is Access Denied 403 page - you do not have permission to access this resource",
-};
-
-export default function Error403() {
-  return (
-    <div className="relative flex flex-col items-center justify-center min-h-screen p-6 overflow-hidden z-1">
-      <GridShape />
-      <div className="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
-        <h1 className="mb-8 font-bold text-gray-800 text-title-md dark:text-white/90 xl:text-title-2xl">
-          403 - ACCESS DENIED
-        </h1>
-
-        <Image
-          src="/images/error/404.svg"
-          alt="403"
-          className="dark:hidden"
-          width={472}
-          height={152}
-        />
-        <Image
-          src="/images/error/404-dark.svg"
-          alt="403"
-          className="hidden dark:block"
-          width={472}
-          height={152}
-        />
-
-        <p className="mt-10 mb-6 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
-          You do not have permission to access this resource. Please contact your administrator if you believe this is a mistake.
-        </p>
-
-        <Link
-          href="/"
-          className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
-        >
-          Back to Home Page
-        </Link>
-      </div>
-      <p className="absolute text-sm text-center text-gray-500 -translate-x-1/2 bottom-6 left-1/2 dark:text-gray-400">
-        &copy; {new Date().getFullYear()} - Admin Dashboard
-      </p>
-    </div>
-  );
-}