sort
This commit is contained in:
@@ -2,39 +2,48 @@
|
||||
import ComponentCard from "@/components/common/ComponentCard";
|
||||
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
|
||||
import BasicTableOne from "@/components/tables/BasicTableOne";
|
||||
import { responseUserTable, getUserDto } from "@/interface/admin";
|
||||
import { apiGetListUser } from "@/service/adminService";
|
||||
import ChangeRoleModal from "@/components/tables/ChangeRoleModal";
|
||||
import UserDetailModal from "@/components/tables/UserDetailModal";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { responseUserTable, getUserDto, fullDataUser } from "@/interface/admin";
|
||||
import {
|
||||
apiDeleteUser,
|
||||
apiGetListUser,
|
||||
apiRestoreUser,
|
||||
} from "@/service/adminService";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
|
||||
|
||||
export default function UserTable() {
|
||||
// --- States cho Pagination ---
|
||||
const [limit, setLimit] = useState<number>(5); // Default theo ảnh là 5
|
||||
const [limit, setLimit] = useState<number>(5);
|
||||
const [limitInput, setLimitInput] = useState<string>("5");
|
||||
const [page, setPage] = useState<number>(1);
|
||||
|
||||
// --- States cho Filter (Theo ảnh Swagger) ---
|
||||
const [searchTerm, setSearchTerm] = useState<string>("");
|
||||
const [authProvider, setAuthProvider] = useState<string>("");
|
||||
const [createdFrom, setCreatedFrom] = useState<string>("");
|
||||
const [createdTo, setCreatedTo] = useState<string>("");
|
||||
const [isDeleted, setIsDeleted] = useState<boolean | undefined>(undefined);
|
||||
|
||||
// Debounced states
|
||||
|
||||
const [selectedUser, setSelectedUser] = useState<fullDataUser | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const [roleUser, setRoleUser] = useState<fullDataUser | null>(null);
|
||||
const [isRoleModalOpen, setIsRoleModalOpen] = useState(false);
|
||||
|
||||
const [debouncedParams, setDebouncedParams] = useState({
|
||||
search: "",
|
||||
limit: 5,
|
||||
authProvider: "",
|
||||
});
|
||||
|
||||
// --- States cho Table ---
|
||||
const [tableData, setTableData] = useState<responseUserTable | null>(null);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [sortBy, setSortBy] = useState<SortColumn | undefined>(undefined);
|
||||
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
|
||||
|
||||
// 1. Xử lý Debounce cho các ô input text
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedParams({
|
||||
@@ -42,12 +51,11 @@ export default function UserTable() {
|
||||
limit: parseInt(limitInput) || 5,
|
||||
authProvider: authProvider,
|
||||
});
|
||||
setPage(1); // Reset về trang 1 khi filter thay đổi
|
||||
setPage(1);
|
||||
}, 600);
|
||||
return () => clearTimeout(handler);
|
||||
}, [searchTerm, limitInput, authProvider]);
|
||||
|
||||
// 2. Hàm fetch data
|
||||
const fetchUsers = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -73,7 +81,15 @@ export default function UserTable() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, debouncedParams, createdFrom, createdTo, isDeleted, sortBy, sortOrder]);
|
||||
}, [
|
||||
page,
|
||||
debouncedParams,
|
||||
createdFrom,
|
||||
createdTo,
|
||||
isDeleted,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
@@ -91,6 +107,42 @@ export default function UserTable() {
|
||||
|
||||
const pagination = tableData?.pagination;
|
||||
|
||||
const handleOpenDetail = (user: fullDataUser) => {
|
||||
setSelectedUser(user);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const handleOpenRoleModal = (user: fullDataUser) => {
|
||||
setRoleUser(user);
|
||||
setIsRoleModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (user: fullDataUser) => {
|
||||
const confirmMessage = `Bạn có chắc chắn muốn khóa/xóa người dùng ${user.profile?.display_name || user.email}?`;
|
||||
if (window.confirm(confirmMessage)) {
|
||||
try {
|
||||
await apiDeleteUser(user.id);
|
||||
toast.success("Đã khóa người dùng thành công!");
|
||||
fetchUsers();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Đã xảy ra lỗi khi xóa!");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestore = async (user: fullDataUser) => {
|
||||
const confirmMessage = `Bạn có chắc chắn muốn khôi phục người dùng ${user.profile?.display_name || user.email}?`;
|
||||
if (window.confirm(confirmMessage)) {
|
||||
try {
|
||||
await apiRestoreUser(user.id);
|
||||
toast.success("Khôi phục người dùng thành công!");
|
||||
fetchUsers();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Đã xảy ra lỗi khi khôi phục!");
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<PageBreadcrumb pageTitle="Quản lý người dùng" />
|
||||
@@ -112,7 +164,9 @@ export default function UserTable() {
|
||||
|
||||
{/* Auth Provider */}
|
||||
<div>
|
||||
<label className="block mb-2 text-sm font-medium">Auth Provider</label>
|
||||
<label className="block mb-2 text-sm font-medium">
|
||||
Auth Provider
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="google"
|
||||
@@ -122,11 +176,18 @@ export default function UserTable() {
|
||||
/>
|
||||
</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")}
|
||||
<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",
|
||||
)
|
||||
}
|
||||
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700"
|
||||
>
|
||||
<option value="">Tất cả</option>
|
||||
@@ -137,7 +198,9 @@ export default function UserTable() {
|
||||
|
||||
{/* Limit */}
|
||||
<div>
|
||||
<label className="block mb-2 text-sm font-medium">Số lượng (Limit)</label>
|
||||
<label className="block mb-2 text-sm font-medium">
|
||||
Số lượng (Limit)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={limitInput}
|
||||
@@ -156,38 +219,60 @@ export default function UserTable() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<BasicTableOne
|
||||
data={tableData?.data || []}
|
||||
onSort={handleSort}
|
||||
sortBy={sortBy}
|
||||
sortOrder={sortOrder}
|
||||
<BasicTableOne
|
||||
data={tableData?.data || []}
|
||||
onSort={handleSort}
|
||||
sortBy={sortBy}
|
||||
sortOrder={sortOrder}
|
||||
onViewDetail={handleOpenDetail}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Phân trang sử dụng data từ API mới */}
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<p className="text-sm text-gray-500">
|
||||
Hiển thị trang {pagination?.current_page} / {pagination?.total_pages} ({pagination?.total_records} kết quả)
|
||||
Hiển thị trang {pagination?.current_page} /{" "}
|
||||
{pagination?.total_pages} ({pagination?.total_records} kết quả)
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
disabled={page <= 1 || loading}
|
||||
onClick={() => setPage(p => p - 1)}
|
||||
onClick={() => setPage((p) => p - 1)}
|
||||
className="px-4 py-2 border rounded-md disabled:opacity-50 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
Trước
|
||||
</button>
|
||||
<button
|
||||
disabled={page >= (pagination?.total_pages || 1) || loading}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
className="px-4 py-2 border rounded-md disabled:opacity-50 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
Sau
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@ export default function Profile() {
|
||||
</h3>
|
||||
<div className="space-y-6">
|
||||
<UserMetaCard data={user ?? {}} />
|
||||
<UserInfoCard data={user ?? {}} />
|
||||
<UserInfoCard data={{ ...user, openEdit: true }} />
|
||||
{(mediaData?.data?.length ?? 0) > 0 && <MediaCard data={mediaData ?? {}} />}
|
||||
<AccountDetails data={user ?? {}} />
|
||||
</div>
|
||||
|
||||
239
src/app/(full-width-pages)/(auth)/reset-password/page.tsx
Normal file
239
src/app/(full-width-pages)/(auth)/reset-password/page.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
"use client";
|
||||
import Input from "@/components/form/input/InputField";
|
||||
import Label from "@/components/form/Label";
|
||||
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "@/icons";
|
||||
import { apiCreateOTP, apiVerifyOTP, apiResetPassword } from "@/service/auth";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ResetPasswordForm() {
|
||||
const [step, setStep] = useState(1);
|
||||
const [email, setEmail] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const isValidEmail = (email: string) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
const isValidPassword = (pass: string) => {
|
||||
const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
|
||||
return passwordRegex.test(pass);
|
||||
};
|
||||
|
||||
const handleSendOtp = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setErrorMsg("");
|
||||
|
||||
if (!email.trim()) {
|
||||
setErrorMsg("Vui lòng nhập email.");
|
||||
return;
|
||||
}
|
||||
if (!isValidEmail(email)) {
|
||||
setErrorMsg("Email không đúng định dạng.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
await apiCreateOTP(email);
|
||||
toast.success("Mã OTP đã được gửi đến email của bạn!");
|
||||
setStep(2);
|
||||
} catch (error) {
|
||||
setErrorMsg("Lỗi khi gửi OTP. Vui lòng kiểm tra lại email.");
|
||||
toast.error("Gửi OTP thất bại.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetPassword = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setErrorMsg("");
|
||||
|
||||
if (!otp.trim()) {
|
||||
setErrorMsg("Vui lòng nhập mã OTP.");
|
||||
return;
|
||||
}
|
||||
if (!isValidPassword(newPassword)) {
|
||||
setErrorMsg("Mật khẩu chưa đủ điều kiện bảo mật.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const verifyRes = await apiVerifyOTP(email, otp);
|
||||
const tokenId = verifyRes?.data?.token_id;
|
||||
|
||||
if (!tokenId) {
|
||||
throw new Error("OTP không hợp lệ hoặc đã hết hạn.");
|
||||
}
|
||||
|
||||
const resetPayload = {
|
||||
email: email,
|
||||
new_password: newPassword,
|
||||
token_id: tokenId,
|
||||
};
|
||||
|
||||
await apiResetPassword(resetPayload);
|
||||
|
||||
toast.success("Đổi mật khẩu thành công!");
|
||||
window.location.href = "/signin";
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : "Đổi mật khẩu thất bại.";
|
||||
setErrorMsg(errorMessage);
|
||||
console.error("Reset password error:", error);
|
||||
toast.error("Vui lòng kiểm tra lại mã OTP.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 w-full lg:w-1/2 overflow-y-auto no-scrollbar">
|
||||
<div className="w-full max-w-md mx-auto mb-5 sm:pt-10">
|
||||
<Link
|
||||
href="/signin"
|
||||
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
Back to Sign In
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
|
||||
<div>
|
||||
<div className="mb-5 sm:mb-8">
|
||||
<h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
|
||||
{step === 1 ? "Forgot Password" : "Set New Password"}
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{step === 1
|
||||
? "Enter your email address to receive an OTP code."
|
||||
: `We sent an OTP to ${email}. Please enter it along with your new password.`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{errorMsg && (
|
||||
<div className="p-3 mb-4 text-sm rounded text-error-500 bg-error-50 dark:bg-error-500/10">
|
||||
{errorMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 1 && (
|
||||
<form onSubmit={handleSendOtp}>
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<Label>
|
||||
Email <span className="text-error-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
type="email"
|
||||
name="email"
|
||||
defaultValue={email}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value);
|
||||
setErrorMsg("");
|
||||
}}
|
||||
placeholder="Enter your registered email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !email.trim()}
|
||||
className={`flex items-center justify-center w-full px-4 py-3 text-sm font-medium text-white transition rounded-lg shadow-theme-xs
|
||||
${loading || !email.trim() ? "bg-gray-400 cursor-not-allowed" : "bg-brand-500 hover:bg-brand-600"}`}
|
||||
>
|
||||
{loading ? "Sending OTP..." : "Send Reset Code"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<form onSubmit={handleResetPassword}>
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<Label>
|
||||
OTP Code <span className="text-error-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="otp"
|
||||
defaultValue={otp}
|
||||
onChange={(e) => {
|
||||
setOtp(e.target.value);
|
||||
setErrorMsg("");
|
||||
}}
|
||||
placeholder="Enter the 6-digit code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>
|
||||
New Password <span className="text-error-500">*</span>
|
||||
</Label>
|
||||
<div
|
||||
className={`relative ${newPassword.length > 0 && !isValidPassword(newPassword) ? "border border-red-500 ring-1 ring-red-500 rounded-lg" : ""}`}
|
||||
>
|
||||
<Input
|
||||
name="newPassword"
|
||||
defaultValue={newPassword}
|
||||
onChange={(e) => {
|
||||
setNewPassword(e.target.value);
|
||||
setErrorMsg("");
|
||||
}}
|
||||
placeholder="Min. 8 characters"
|
||||
type={showPassword ? "text" : "password"}
|
||||
/>
|
||||
<span
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"
|
||||
>
|
||||
{showPassword ? <EyeIcon /> : <EyeCloseIcon />}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p
|
||||
className={`mt-2 text-xs ${newPassword.length === 0 ? "text-gray-400" : isValidPassword(newPassword) ? "text-green-500" : "text-red-500"}`}
|
||||
>
|
||||
Mật khẩu phải chứa tối thiểu 8 ký tự, 1 chữ cái in hoa, 1 chữ số và 1 ký tự đặc biệt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStep(1)}
|
||||
className="flex items-center justify-center w-1/3 px-4 py-3 text-sm font-medium text-gray-700 transition bg-gray-200 rounded-lg hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !isValidPassword(newPassword)}
|
||||
className={`flex items-center justify-center w-2/3 px-4 py-3 text-sm font-medium text-white transition rounded-lg shadow-theme-xs
|
||||
${loading || !isValidPassword(newPassword) ? "bg-brand-400 opacity-70 cursor-not-allowed" : "bg-brand-500 hover:bg-brand-600"}`}
|
||||
>
|
||||
{loading ? "Resetting..." : "Reset Password"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -750,3 +750,21 @@ span.flatpickr-weekday,
|
||||
opacity: 0.8;
|
||||
cursor: grabbing; /* Changes the cursor to indicate dragging */
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
|
||||
}
|
||||
Reference in New Issue
Block a user