Kain344/History-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sort in user table

Browse Source
This commit is contained in:
bokhonglo
2026-04-08 14:17:02 +07:00
parent 2d9eaed4fb
commit 8f71d46652
9 changed files with 376 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
api.ts
View File

@@ -12,6 +12,7 @@ export const API = {
PRESIGNED: `${API_URL_ROOT}/media/presigned`
},
Auth : {
LOGOUT: `${API_URL_ROOT}/auth/logout`,
SIGNUP: `${API_URL_ROOT}/auth/signup`,
SIGNIN: `${API_URL_ROOT}/auth/signin`,
CREATEOTP: `${API_URL_ROOT}/auth/token/create`,

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

@@ -2,62 +2,85 @@
import ComponentCard from "@/components/common/ComponentCard";
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
import BasicTableOne from "@/components/tables/BasicTableOne";
import { fullDataUser, getUserDto } from "@/interface/admin";
import { responseUserTable, getUserDto } from "@/interface/admin";
import { apiGetListUser } from "@/service/adminService";
import { useEffect, useState } from "react";
import { useEffect, useState, useCallback } from "react";
// Trích xuất type sort cho dễ tái sử dụng
export type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
export default function UserTable() {
const [users, setUsers] = useState<fullDataUser[]>([]);
const [loading, setLoading] = useState<boolean>(true);
// --- States cho Pagination ---
const [limit, setLimit] = useState<number>(5); // Default theo ảnh là 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 [debouncedSearch, setDebouncedSearch] = 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 [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(() => {
setDebouncedSearch(searchTerm);
}, 500);
setDebouncedParams({
search: searchTerm,
limit: parseInt(limitInput) || 5,
authProvider: authProvider,
});
setPage(1); // Reset về trang 1 khi filter thay đổi
}, 600);
return () => clearTimeout(handler);
}, [searchTerm]);
}, [searchTerm, limitInput, authProvider]);
useEffect(() => {
const fetchUser = async () => {
// 2. Hàm fetch data
const fetchUsers = useCallback(async () => {
setLoading(true);
try {
const payload: getUserDto = { limit: 10 };
if (debouncedSearch) payload.search = debouncedSearch;
if (sortBy) {
payload.sort = sortBy;
payload.order = sortOrder;
}
const payload: getUserDto = {
page: page,
limit: debouncedParams.limit,
search: debouncedParams.search || undefined,
auth_provider: debouncedParams.authProvider || undefined,
created_from: createdFrom || undefined,
created_to: createdTo || undefined,
is_deleted: isDeleted,
sort: sortBy,
order: sortOrder,
};
const response = await apiGetListUser(payload);
// console.log("Request Payload:", payload);
// console.log("API Response:", response);
if (response && response.data) {
setUsers(response.data);
} else {
setUsers([]);
if (response?.status) {
setTableData(response);
}
} catch (err) {
console.error("Lỗi:", err);
setUsers([]);
console.error("Fetch error:", err);
setTableData(null);
} finally {
setLoading(false);
}
};
}, [page, debouncedParams, createdFrom, createdTo, isDeleted, sortBy, sortOrder]);
fetchUser();
}, [debouncedSearch, sortBy, sortOrder]);
useEffect(() => {
fetchUsers();
}, [fetchUsers]);
const handleSort = (column: SortColumn) => {
setPage(1);
if (sortBy === column) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
@@ -66,44 +89,103 @@ export default function UserTable() {
}
};
const pagination = tableData?.pagination;
return (
<div>
<PageBreadcrumb pageTitle="Users Table" />
<PageBreadcrumb pageTitle="Quản lý người dùng" />
<div className="space-y-6">
<ComponentCard title="Danh sách người dùng">
{/* Ô nhập tìm kiếm */}
<div className="mb-4">
<ComponentCard title="Bộ lọc tìm kiếm">
{/* Grid Layout cho các Filter giống Swagger */}
<div className="grid grid-cols-1 gap-4 mb-6 md:grid-cols-3 lg:grid-cols-4">
{/* Search */}
<div>
<label className="block mb-2 text-sm font-medium">Search</label>
<input
type="text"
placeholder="Tìm kiếm người dùng..."
placeholder="Name, email..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full sm:w-1/3 px-4 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700"
/>
</div>
<div className="relative min-h-[400px]">
{loading && (
<div className="absolute inset-0 z-10 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 backdrop-blur-[1px] transition-opacity">
<div className="flex flex-col items-center">
{/* Spinner xoay tròn */}
<div className="w-10 h-10 border-4 border-gray-200 border-t-brand-500 rounded-full animate-spin"></div>
<p className="mt-2 text-sm font-medium text-gray-500">
Đang tải...
</p>
{/* Auth Provider */}
<div>
<label className="block mb-2 text-sm font-medium">Auth Provider</label>
<input
type="text"
placeholder="google"
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"
/>
</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")}
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700"
>
<option value="">Tất cả</option>
<option value="false">Hoạt động</option>
<option value="true">Đã xóa</option>
</select>
</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"
/>
</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">
<div className="w-10 h-10 border-4 border-t-brand-500 rounded-full animate-spin"></div>
</div>
)}
{/* Bảng vẫn hiển thị ở dưới (mờ đi) hoặc ẩn tùy bạn,
nhưng truyền data vào để tránh giật lag layout */}
<BasicTableOne
data={users}
data={tableData?.data || []}
onSort={handleSort}
sortBy={sortBy}
sortOrder={sortOrder}
/>
</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ả)
</p>
<div className="flex gap-2">
<button
disabled={page <= 1 || loading}
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)}
className="px-4 py-2 border rounded-md disabled:opacity-50 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Sau
</button>
</div>
</div>
</ComponentCard>
</div>
</div>

5
src/app/(admin)/(others-pages)/profile/page.tsx
View File

@@ -19,7 +19,7 @@ export default function Profile() {
const fetchUser = async () => {
try {
const userData = await apiGetCurrentUser();
const mediaResponse = await apiGetCurrentUserMedia(); // Giả sử hàm này return {status, data, message}
const mediaResponse = await apiGetCurrentUserMedia();
setMediaData(mediaResponse);
setUser(userData);
@@ -31,7 +31,6 @@ export default function Profile() {
};
fetchUser();
}, []);
return (
<div>
<div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
@@ -41,8 +40,8 @@ export default function Profile() {
<div className="space-y-6">
<UserMetaCard data={user ?? {}} />
<UserInfoCard data={user ?? {}} />
{(mediaData?.data?.length ?? 0) > 0 && <MediaCard data={mediaData ?? {}} />}
<AccountDetails data={user ?? {}} />
<MediaCard data={mediaData ?? {}} />
</div>
</div>
</div>

28
src/components/header/UserDropdown.tsx
View File

@@ -6,9 +6,12 @@ import { Dropdown } from "../ui/dropdown/Dropdown";
import { DropdownItem } from "../ui/dropdown/DropdownItem";
import { fullDataUser } from "@/interface/admin";
import { UserMetaCardProps } from "@/interface/user";
import { apiGetCurrentUser } from "@/service/auth";
import { apiGetCurrentUser, apiLogout } from "@/service/auth";
import { useRouter } from "next/navigation";
export default function UserDropdown() {
const router = useRouter();
const [isOpen, setIsOpen] = useState(false);
const [user, setUser] = useState<UserMetaCardProps | null>(null);
const [loading, setLoading] = useState<boolean>(true);
@@ -25,7 +28,7 @@ export default function UserDropdown() {
const fetchUser = async () => {
try {
const userData = await apiGetCurrentUser();
console.log("User data in dropdown:", userData);
// console.log("User data in dropdown:", userData);
setUser(userData);
} catch (err) {
console.error("Lỗi:", err);
@@ -36,6 +39,26 @@ export default function UserDropdown() {
fetchUser();
}, []);
const handleLogout = async (e: React.MouseEvent) => {
e.preventDefault();
try {
await apiLogout();
} catch (error) {
console.error("Logout failed", error);
} finally {
localStorage.clear();
sessionStorage.clear();
document.cookie.split(";").forEach((c) => {
document.cookie = c
.replace(/^ +/, "")
.replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
});
window.location.href = "/signin";
}
};
return (
<div className="relative">
@@ -168,6 +191,7 @@ export default function UserDropdown() {
</li>
</ul>
<Link
onClick={handleLogout}
href="/signin"
className="flex items-center gap-3 px-3 py-2 mt-3 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>

160
src/components/tables/BasicTableOne.tsx
View File

@@ -11,10 +11,9 @@ import Badge from "../ui/badge/Badge";
import Image from "next/image";
import { fullDataUser } from "@/interface/admin";
// Kiểu dữ liệu sort
// Kiểu dữ liệu sort dựa trên UserTable
type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
// Định nghĩa kiểu dữ liệu cho props truyền từ cha xuống
interface BasicTableOneProps {
data: fullDataUser[];
onSort: (column: SortColumn) => void;
@@ -22,10 +21,15 @@ interface BasicTableOneProps {
sortOrder?: "asc" | "desc";
}
export default function BasicTableOne({ data, onSort, sortBy, sortOrder }: BasicTableOneProps) {
// Hàm phụ trợ để format lại ngày tháng năm
export default function BasicTableOne({
data,
onSort,
sortBy,
sortOrder,
}: BasicTableOneProps) {
// Format ngày tháng: 08 Apr 2026
const formatDate = (dateString: string) => {
if (!dateString) return "";
if (!dateString) return "-";
const date = new Date(dateString);
return date.toLocaleDateString("en-GB", {
day: "2-digit",
@@ -34,22 +38,38 @@ export default function BasicTableOne({ data, onSort, sortBy, sortOrder }: Basic
});
};
// Component phụ trợ để vẽ icon mũi tên Sort
// Component icon sắp xếp
const SortIcon = ({ column }: { column: SortColumn }) => {
const isActive = sortBy === column;
return (
<div className="flex flex-col ml-2 opacity-50 cursor-pointer hover:opacity-100">
<svg
className={`w-3 h-3 ${isActive && sortOrder === "asc" ? "text-blue-600 dark:text-blue-400 opacity-100" : "text-gray-400"}`}
fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
className={`w-3 h-3 ${isActive && sortOrder === "asc" ? "text-brand-500 opacity-100" : "text-gray-400"}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 15l7-7 7 7" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={3}
d="M5 15l7-7 7 7"
/>
</svg>
<svg
className={`w-3 h-3 -mt-1 ${isActive && sortOrder === "desc" ? "text-blue-600 dark:text-blue-400 opacity-100" : "text-gray-400"}`}
fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
className={`w-3 h-3 -mt-1 ${isActive && sortOrder === "desc" ? "text-brand-500 opacity-100" : "text-gray-400"}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 9l-7 7-7-7" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={3}
d="M19 9l-7 7-7-7"
/>
</svg>
</div>
);
@@ -58,57 +78,86 @@ export default function BasicTableOne({ data, onSort, sortBy, sortOrder }: Basic
return (
<div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-white/[0.05] dark:bg-white/[0.03]">
<div className="max-w-full overflow-x-auto">
<div className="min-w-[1102px]">
{/* Đảm bảo bảng có chiều rộng tối thiểu để không bị nát layout trên mobile */}
<div className="min-w-[1100px]">
<Table>
{/* Table Header */}
<TableHeader className="border-b border-gray-100 dark:border-white/[0.05]">
<TableRow>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
<div className="flex items-center cursor-pointer" onClick={() => onSort("display_name")}>
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
>
<div
className="flex items-center cursor-pointer select-none"
onClick={() => onSort("display_name")}
>
Người dùng
<SortIcon column="display_name" />
</div>
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
<div className="flex items-center cursor-pointer" onClick={() => onSort("email")}>
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
>
<div
className="flex items-center cursor-pointer select-none"
onClick={() => onSort("email")}
>
Email
<SortIcon column="email" />
</div>
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
Vai trò (Role)
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
>
Vai trò
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
Trạng thái
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
<div className="flex items-center cursor-pointer" onClick={() => onSort("created_at")}>
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
>
<div
className="flex items-center cursor-pointer select-none"
onClick={() => onSort("created_at")}
>
Ngày tham gia
<SortIcon column="created_at" />
</div>
</TableCell>
{/* Thêm cột Ngày cập nhật */}
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
<div className="flex items-center cursor-pointer" onClick={() => onSort("updated_at")}>
Cập nhật lần cuối
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
>
<div
className="flex items-center cursor-pointer select-none"
onClick={() => onSort("updated_at")}
>
Cập nhật
<SortIcon column="updated_at" />
</div>
</TableCell>
</TableRow>
</TableHeader>
{/* Table Body */}
<TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
{data.map((user) => (
<TableRow key={user.id}>
{/* Cột User */}
<TableCell className="px-5 py-4 sm:px-6 text-start">
{data.length > 0 ? (
data.map((user) => (
<TableRow
key={user.id}
className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors"
>
{/* Cột Tên + Avatar */}
<TableCell className="px-5 py-4 text-start">
<div className="flex items-center gap-3">
<div className="w-10 h-10 overflow-hidden rounded-full flex-shrink-0 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
{user.profile?.avatar_url ? (
@@ -120,61 +169,72 @@ export default function BasicTableOne({ data, onSort, sortBy, sortOrder }: Basic
className="object-cover w-full h-full"
/>
) : (
<span className="font-semibold text-gray-500 uppercase">
<span className="font-bold text-brand-500 uppercase text-xs">
{user.profile?.display_name?.charAt(0) || "U"}
</span>
)}
</div>
<div>
<span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
{user.profile?.display_name || "Chưa cập nhật tên"}
{user.profile?.display_name || "N/A"}
</span>
{user.profile?.phone && (
<span className="block text-gray-500 text-theme-xs dark:text-gray-400">
{user.profile.phone}
ID: {user.id.slice(0, 8)}...
</span>
)}
</div>
</div>
</TableCell>
{/* Cột Email */}
<TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
<TableCell className="px-5 py-4 text-gray-600 text-start text-theme-sm dark:text-gray-400">
{user.email}
</TableCell>
{/* Cột Roles */}
<TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
{/* Cột Roles (Badge list) */}
<TableCell className="px-5 py-4 text-start text-theme-sm">
<div className="flex flex-wrap gap-1">
{user.roles && user.roles.length > 0 ? (
user.roles.map((role: any) => (
<span key={role.id} className="block">
user.roles.map((role) => (
<span
key={role.id}
className="px-2 py-0.5 rounded-md bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400 text-[10px] font-normal uppercase tracking-wider"
>
{role.name}
</span>
))
) : (
<span>Chưa cấp quyền</span>
<span className="text-gray-400 italic">No Role</span>
)}
</div>
</TableCell>
{/* Cột Trạng thái */}
<TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
<Badge size="sm" color={user.is_deleted ? "error" : "success"}>
{/* Cột Trạng thái (Sử dụng Badge component) */}
<TableCell className="px-5 py-4 text-start">
<Badge
size="sm"
variant="light"
color={user.is_deleted ? "error" : "success"}
>
{user.is_deleted ? "Bị khóa" : "Hoạt động"}
</Badge>
</TableCell>
{/* Cột Ngày tham gia */}
<TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
{formatDate(user.created_at)}
</TableCell>
{/* Cột Ngày cập nhật */}
<TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
{formatDate(user.updated_at)}
</TableCell>
</TableRow>
))}
))
) : (
<TableRow>
<TableCell className="px-5 py-4 text-center text-gray-500 italic"> </TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>

6
src/components/user-profile/AccountDetails.tsx
View File

@@ -80,7 +80,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
return (
<>
<div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
<div className="p-5 border border-red-200 rounded-2xl dark:border-gray-800 lg:p-6">
<div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
<div>
<h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
@@ -108,7 +108,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
<button
onClick={openModal}
className="flex items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 lg:inline-flex lg:w-auto"
className="flex items-center justify-center gap-2 rounded-full border border-red-300 bg-white px-4 py-3 text-sm font-medium text-red-600 hover:bg-gray-50 dark:border-red-700 dark:bg-red-800 dark:text-red-400 lg:inline-flex lg:w-auto"
>
<svg
className="fill-current"
@@ -211,7 +211,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
>
Close
</Button>
<Button size="sm" type="submit">
<Button size="sm" type="submit" className="bg-red-500 hover:bg-red-600 ">
Save Changes
</Button>
</div>

4
src/components/user-profile/Media.tsx
View File

@@ -19,8 +19,8 @@ export default function MediaCard({ data }: { data: MediaDto }) {
}));
return (
<div className="w-full">
<h3 className="mb-4 font-semibold">Media Assets</h3>
<div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">Media Assets</h3>
<div className="flex flex-row gap-4 overflow-x-auto pb-4 scrollbar-hide">
{listMedia.map((item, idx) => (

18
src/interface/admin.ts
View File

@@ -1,13 +1,17 @@
import { Profile, UserRole } from "@/interface/user";
export interface getUserDto {
cursor?: string;
page?: number; // Thay cursor bằng page theo Swagger
limit: number;
is_deleted?: boolean;
order?: "asc" | "desc";
role_ids?: string[];
search?: string;
sort?: "created_at" | "updated_at" | "display_name" | "email";
// Thêm các trường mới từ ảnh Swagger
auth_provider?: string;
created_from?: string;
created_to?: string;
}
export interface fullDataUser {
@@ -24,3 +28,15 @@ export interface fullDataUser {
profile: Profile;
token_version: number;
}
export interface responseUserTable {
data: fullDataUser[];
status: boolean;
message?: string;
pagination?: {
current_page: number;
page_size: number;
total_records: number;
total_pages: number;
};
}

5
src/service/auth.ts
View File

@@ -21,6 +21,11 @@ export const apiSignUp = async (payload: any) => {
return response.data;
};
export const apiLogout = async () => {
const response = await api.post(API.Auth.LOGOUT);
return response.data;
};
export const apiSignIn = async (payload: any) => {
const response = await api.post(API.Auth.SIGNIN, payload);
return response.data;