update media manage

2026-04-23 15:52:18 +07:00
parent bf44502a24
commit e273df1ee2
14 changed files with 830 additions and 66 deletions
--- a/api.ts
+++ b/api.ts
@@ -10,6 +10,7 @@ export const API = {
    APPLICATION: `${API_URL_ROOT}/users/current/application`
  },
  Media:{
+    GET_MEDIA: `${API_URL_ROOT}/media`,
    PRESIGNED: `${API_URL_ROOT}/media/presigned`,
    GET_MEDIA_BY_ID: (Id: number | string) => `${API_URL_ROOT}/media/${Id}`,
    DELETE_MEDIA_BY_ID: (Id: number | string) => `${API_URL_ROOT}/media/${Id}`,
--- a/src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx
+++ b/src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx
@@ -41,13 +41,11 @@ export default function RoleUpgrade() {

  const handleIframeLoad = () => {
    const iframe = iframeRef.current;
-    // Đảm bảo iframe và nội dung bên trong đã sẵn sàng và cùng nguồn gốc (same-origin)
+
    if (!iframe || !iframe.contentDocument) return;

    const updateHeight = () => {
      if (iframe.contentDocument) {
-        // Mẹo: Reset height về 'auto' trước để lấy được chiều cao thực tế
-        // (đặc biệt khi người dùng xóa bớt nội dung làm chiều cao ngắn lại)
        iframe.style.height = "auto";
        const scrollHeight =
          iframe.contentDocument.documentElement.scrollHeight;
@@ -55,11 +53,8 @@ export default function RoleUpgrade() {
      }
    };

-    // 1. Cập nhật chiều cao ngay khi iframe load xong HTML
    updateHeight();

-    // 2. Dùng ResizeObserver để theo dõi những thay đổi sau khi load
-    // (VD: ảnh bên trong tải xong làm nội dung dài ra)
    const resizeObserver = new ResizeObserver(() => {
      updateHeight();
    });
--- a/src/app/(admin)/(others-pages)/(management)/assets/page.tsx
+++ b/src/app/(admin)/(others-pages)/(management)/assets/page.tsx
@@ -0,0 +1,438 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import Pagination from "@/components/tables/Pagination";
+import { toast } from "sonner";
+import MediaTable, {
+  MediaItem,
+  MediaSortColumn,
+} from "@/components/tables/MediaTable";
+import { LIMIT_ITEM_TABLE } from "../../../../../../constant";
+import { deleteMedia, deleteMediaById, getMedia } from "@/service/mediaService";
+import { URL_MEDIA } from "../../../../../../api";
+import Swal from "sweetalert2";
+
+const formatDateTimeToISO = (
+  dateStr: string,
+  timeStr: string,
+  isEndOfDay: boolean = false,
+): string | undefined => {
+  if (!dateStr) return undefined;
+  const time = timeStr || (isEndOfDay ? "23:59" : "00:00");
+  return `${dateStr}T${time}:00.000000+07:00`;
+};
+
+export interface MediaResponse {
+  status: boolean;
+  message: string;
+  data: MediaItem[];
+  pagination: {
+    current_page: number;
+    page_size: number;
+    total_records: number;
+    total_pages: number;
+  };
+}
+
+export default function AssetsPage() {
+  const [page, setPage] = useState<number>(1);
+  const [limitInput, setLimitInput] = useState<string>(
+    LIMIT_ITEM_TABLE.toString(),
+  );
+
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [mimeTypeFilter, setMimeTypeFilter] = useState<string>("");
+
+  const [fromDate, setFromDate] = useState<string>("");
+  const [fromTime, setFromTime] = useState<string>("");
+  const [toDate, setToDate] = useState<string>("");
+  const [toTime, setToTime] = useState<string>("");
+
+  const [debouncedParams, setDebouncedParams] = useState({
+    search: "",
+    limit: LIMIT_ITEM_TABLE,
+    mimeType: "",
+    fromDate: "",
+    fromTime: "",
+    toDate: "",
+    toTime: "",
+  });
+
+  const [tableData, setTableData] = useState<MediaResponse | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const [sortBy, setSortBy] = useState<MediaSortColumn>("created_at");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+
+  // State quản lý checkbox & logic View (Yêu cầu 1 & 3)
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [index, setIndex] = useState<number>(-1); // Dùng cho thư viện xem ảnh
+  const [isSelectionMode, setIsSelectionMode] = useState<boolean>(false);
+
+  const handleReset = () => {
+    setSearchTerm("");
+    setMimeTypeFilter("");
+    setLimitInput(LIMIT_ITEM_TABLE.toString());
+    setFromDate("");
+    setFromTime("");
+    setToDate("");
+    setToTime("");
+    setPage(1);
+    setSelectedIds([]);
+
+    setDebouncedParams({
+      search: "",
+      limit: LIMIT_ITEM_TABLE,
+      mimeType: "",
+      fromDate: "",
+      fromTime: "",
+      toDate: "",
+      toTime: "",
+    });
+  };
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedParams({
+        search: searchTerm,
+        limit: parseInt(limitInput) || LIMIT_ITEM_TABLE,
+        mimeType: mimeTypeFilter,
+        fromDate,
+        fromTime,
+        toDate,
+        toTime,
+      });
+      setPage(1);
+    }, 600);
+    return () => clearTimeout(handler);
+  }, [
+    searchTerm,
+    limitInput,
+    mimeTypeFilter,
+    fromDate,
+    fromTime,
+    toDate,
+    toTime,
+  ]);
+
+  useEffect(() => {
+    fetchMediaData();
+  }, [page, debouncedParams, sortBy, sortOrder]);
+
+  const fetchMediaData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const payload: any = {
+        page: page,
+        limit: debouncedParams.limit,
+        search: debouncedParams.search || undefined,
+        sort: sortBy,
+        order: sortOrder,
+      };
+
+      if (debouncedParams.mimeType)
+        payload.mime_type = debouncedParams.mimeType;
+      const createdFrom = formatDateTimeToISO(
+        debouncedParams.fromDate,
+        debouncedParams.fromTime,
+        false,
+      );
+      if (createdFrom) payload.created_from = createdFrom;
+      const createdTo = formatDateTimeToISO(
+        debouncedParams.toDate,
+        debouncedParams.toTime,
+        true,
+      );
+      if (createdTo) payload.created_to = createdTo;
+
+      const response = await getMedia(payload);
+      if (response?.status) {
+        setTableData(response);
+      }
+    } catch (err) {
+      toast.error("Lỗi lấy danh sách tệp tin");
+      console.error("Lỗi lấy danh sách tệp tin:", err);
+      setTableData(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, debouncedParams, sortBy, sortOrder]);
+
+  const handleSort = (column: MediaSortColumn) => {
+    setPage(1);
+    if (sortBy === column) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(column);
+      setSortOrder("desc");
+    }
+  };
+
+  // --- LOGIC YÊU CẦU 1: Chọn nhiều ---
+  const handleToggleSelect = (id: string) => {
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id],
+    );
+  };
+
+  const handleToggleSelectAll = (checked: boolean) => {
+    if (checked && tableData) {
+      setSelectedIds(tableData.data.map((i) => i.id));
+    } else {
+      setSelectedIds([]);
+    }
+  };
+
+  const toggleItemSelection = (id: string) => {
+    handleToggleSelect(id);
+  };
+
+  const handleDeleteMulti = async () => {
+    if (selectedIds.length === 0) return;
+
+    const result = await Swal.fire({
+      title: "Xác nhận xóa?",
+      text: `Bạn có chắc chắn muốn xóa ${selectedIds.length} tệp đã chọn? Hành động này không thể hoàn tác!`,
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#ef4444",
+      cancelButtonColor: "#6b7280", 
+      confirmButtonText: "Xóa",
+      cancelButtonText: "Hủy",
+      reverseButtons: true, 
+    });
+
+    if (result.isConfirmed) {
+      try {
+        const response = await deleteMedia(selectedIds);
+        if (response?.status) {
+          await Swal.fire({
+            title: "Đã xóa!",
+            text: `Đã xóa thành công ${selectedIds.length} tệp tin.`,
+            icon: "success",
+            confirmButtonColor: "#3b82f6",
+            timer: 2000,
+          });
+          setSelectedIds([]);
+          fetchMediaData();
+        } else {
+          toast.error(response?.message || "Xóa tệp thất bại");
+        }
+      } catch (error) {
+        toast.error("Đã xảy ra lỗi khi xóa");
+        console.error(error);
+      }
+    }
+  };
+
+  const handleDeleteSingle = async (id: string) => {
+    const result = await Swal.fire({
+      title: "Xóa tệp tin?",
+      text: "Bạn có chắc chắn muốn xóa tệp này không?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#ef4444",
+      cancelButtonColor: "#6b7280",
+      confirmButtonText: "Xóa ngay",
+      cancelButtonText: "Quay lại",
+      reverseButtons: true,
+    });
+
+    if (result.isConfirmed) {
+      try {
+        const response = await deleteMediaById(id);
+        if (response?.status) {
+          await Swal.fire({
+            title: "Thành công!",
+            text: "Tệp tin đã được xóa bỏ.",
+            icon: "success",
+            confirmButtonColor: "#3b82f6",
+            timer: 1500,
+          });
+          setSelectedIds((prev) => prev.filter((i) => i !== id));
+          fetchMediaData();
+        } else {
+          toast.error(response?.message || "Không thể xóa tệp");
+        }
+      } catch (error) {
+        toast.error("Lỗi hệ thống khi xóa");
+        console.error(error);
+      }
+    }
+  };
+
+  const handleItemClick = (item: MediaItem, idx: number) => {
+    const isImage = item.mime_type.includes("image");
+
+    if (isSelectionMode) {
+      toggleItemSelection(item.id);
+    } else {
+      if (isImage) {
+        setIndex(idx);
+      } else {
+        const fileUrl = `${URL_MEDIA}${item.storage_key}`;
+        const googleDocsUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(fileUrl)}&embedded=true`;
+        window.open(googleDocsUrl, "_blank");
+      }
+    }
+  };
+
+  const pagination = tableData?.pagination;
+
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Quản lý tệp tin (Assets)" />
+
+      <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"
+              >
+                <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">Tìm kiếm</label>
+              <input
+                type="text"
+                placeholder="Tên tệp, ID..."
+                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>
+              <label className="block mb-2 text-sm font-medium">Loại tệp</label>
+              <select
+                value={mimeTypeFilter}
+                onChange={(e) => setMimeTypeFilter(e.target.value)}
+                className="w-full px-3 py-2 bg-white dark:bg-gray-900 border rounded-lg cursor-pointer outline-none focus:border-brand-500"
+              >
+                <option value="">Tất cả</option>
+                <option value="image">Hình ảnh (webp, jpeg, png...)</option>
+                <option value="application/pdf">PDF</option>
+                <option value="application/msword">Word (doc, docx)</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">
+                Hiển thị (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 tệp tin"
+          headerAction={
+            <button
+              onClick={handleDeleteMulti}
+              disabled={selectedIds.length === 0}
+              className={`flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-colors border ${
+                selectedIds.length > 0
+                  ? "bg-red-500 text-white border-red-500 hover:bg-red-600 shadow-sm cursor-pointer"
+                  : "bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed dark:bg-gray-800 dark:border-gray-700"
+              }`}
+            >
+              Xóa {selectedIds.length > 0 && `(${selectedIds.length})`}
+            </button>
+          }
+        >
+          <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>
+            )}
+
+            <MediaTable
+              data={tableData?.data || []}
+              onSort={handleSort}
+              sortBy={sortBy}
+              sortOrder={sortOrder}
+              selectedIds={selectedIds}
+              onToggleSelect={handleToggleSelect}
+              onToggleSelectAll={handleToggleSelectAll}
+              onViewSingle={handleItemClick}
+              onDeleteSingle={handleDeleteSingle}
+            />
+          </div>
+
+          <div className="flex items-center justify-between mt-6">
+            <p className="text-sm text-gray-500">
+              Hiển thị {pagination?.total_records || 0} tệp tin
+            </p>
+
+            {pagination && pagination.total_pages > 1 && (
+              <Pagination
+                currentPage={pagination.current_page}
+                totalPages={pagination.total_pages}
+                onPageChange={(newPage) => setPage(newPage)}
+              />
+            )}
+          </div>
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}
--- a/src/app/(admin)/(others-pages)/(management)/user-information/page.tsx
+++ b/src/app/(admin)/(others-pages)/(management)/user-information/page.tsx
@@ -306,7 +306,7 @@ export default function UserTable() {

            <div>
              <label className="block mb-2 text-sm font-medium">
-                Trạng thái xóa
+                Trạng thái
              </label>
              <select
                onChange={(e) =>
--- a/src/app/(admin)/(others-pages)/account/applications/page.tsx
+++ b/src/app/(admin)/(others-pages)/account/applications/page.tsx
@@ -22,6 +22,7 @@ export default function ApplicationDetailPage() {
    (state: RootState) => state.user.selectedApplication,
  );
  const router = useRouter();
+  
  const [isDeleting, setIsDeleting] = useState(false);
  const [errMessage, setErrMessage] = useState<string>(
    "Không thể xóa đơn đăng ký này.",
--- a/src/app/(admin)/(others-pages)/assets/page.tsx
+++ b/src/app/(admin)/(others-pages)/assets/page.tsx
@@ -1,5 +0,0 @@
-export default function Page() {
-  return (
-    <div className=''>Page</div>
-  )
-}
--- a/src/app/(admin)/(others-pages)/library/page.tsx
+++ b/src/app/(admin)/(others-pages)/library/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
 import ApplicationLibrary from "@/components/user-profile/ApplicationList";
 import { MediaDto } from "@/interface/media";
 import { apiGetCurrentUserApplications, apiGetCurrentUserMedia } from "@/service/userService";
@@ -11,7 +10,6 @@ export default function LibraryPage() {
  const [mediaData, setMediaData] = useState<MediaDto | null>(null);
  const [applications, setApplications] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
-  const dispatch = useDispatch();

  useEffect(() => {
    const fetchLibraryContent = async () => {
@@ -40,28 +38,37 @@ export default function LibraryPage() {
    );
  }

+  const hasNoData = (!mediaData?.data || mediaData.data.length === 0) && applications.length === 0;
+
  return (
    <div className="min-h-screen bg-gray-50/50 p-4 dark:bg-zinc-950 lg:p-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
          Thư viện
        </h1>
-       
      </div>

-      <div className="space-y-12">
-        {(mediaData?.data?.length ?? 0) > 0 && (
-          <section>
-            <MediaLibrary data={mediaData ?? {}} />
-          </section>
-        )}
+      {hasNoData ? (
+        <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-gray-200 py-24 text-center dark:border-zinc-800">
+          <p className="text-lg font-medium text-gray-500 dark:text-gray-400">
+            Chưa có nội dung nào trong thư viện
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-12">
+          {(mediaData?.data?.length ?? 0) > 0 && (
+            <section>
+              <MediaLibrary data={mediaData ?? {}} />
+            </section>
+          )}

-        {applications.length > 0 && (
-          <section>
-            <ApplicationLibrary applications={applications} />
-          </section>
-        )}
-      </div>
+          {applications.length > 0 && (
+            <section>
+              <ApplicationLibrary applications={applications} />
+            </section>
+          )}
+        </div>
+      )}
    </div>
  );
 }
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -737,25 +737,48 @@ span.flatpickr-weekday,
  box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.1),
    0 1px 2px 0 rgba(16, 24, 40, 0.06);
  opacity: 0.8;
-  cursor: grabbing; /* Changes the cursor to indicate dragging */
+  cursor: grabbing; 
 }

 html {
  scrollbar-gutter: stable;
+  overflow-y: scroll;
 }
+
 html {
  overflow-y: scroll;
 }

 ::-webkit-scrollbar {
-  -webkit-appearance: none;
-  width: 10px;
+  width: 10px; 
+  height: 8px; 
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-gray-50); 
 }

 ::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, .5);
-  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+  border-radius: 10px;
+  background-color: var(--color-gray-300);
+  border: 2px solid var(--color-gray-50);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-gray-400);
+}
+
+.dark ::-webkit-scrollbar-track {
+  background: var(--color-gray-950);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background-color: var(--color-gray-700);
+  border: 2px solid var(--color-gray-950);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-gray-600);
 }

 .ql-editor pre.ql-syntax {
--- a/src/components/auth/SignUpForm.tsx
+++ b/src/components/auth/SignUpForm.tsx
@@ -9,11 +9,15 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { API, HOME_URL } from "../../../api";
 import Swal from "sweetalert2";
+import { useRouter } from "next/navigation";
+

 export default function SignUpForm() {
  const [showPassword, setShowPassword] = useState(false);
  const [isChecked, setIsChecked] = useState(false);

+  const router = useRouter();
+
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    fname: "",
@@ -103,9 +107,15 @@ export default function SignUpForm() {
      };

      const signupRes = await apiSignUp(signupPayload);
-      Swal.fire("Đăng ký thành công! Đang chuyển hướng về trang đăng nhập!");

-      window.location.href = "/signin";
+      await Swal.fire({
+        title: "Tạo tài khoản thành công!. Quay về trang đăng nhập để tiếp tục",
+        icon: "success",
+        timer: 1500,
+        showConfirmButton: false,
+      });
+      router.push("/signin");
+
    } catch (error) {
      const errorMessage =
        error instanceof Error
--- a/src/components/tables/MediaTable.tsx
+++ b/src/components/tables/MediaTable.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import Badge from "../ui/badge/Badge";
+
+export type MediaSortColumn =
+  | "created_at"
+  | "updated_at"
+  | "size"
+  | "original_name"
+  | "mime_type";
+
+export interface MediaItem {
+  id: string;
+  user_id: string;
+  storage_key: string;
+  original_name: string;
+  mime_type: string;
+  size: number;
+  file_metadata: any;
+  created_at: string;
+  updated_at: string;
+}
+
+interface MediaTableProps {
+  data: MediaItem[];
+  onSort: (column: MediaSortColumn) => void;
+  sortBy?: MediaSortColumn;
+  sortOrder?: "asc" | "desc";
+  // Các props mới thêm cho yêu cầu chọn, xem, xóa
+  selectedIds: string[];
+  onToggleSelect: (id: string) => void;
+  onToggleSelectAll: (checked: boolean) => void;
+  onViewSingle: (item: MediaItem, index: number) => void;
+  onDeleteSingle: (id: string) => void;
+}
+
+export default function MediaTable({
+  data,
+  onSort,
+  sortBy,
+  sortOrder,
+  selectedIds,
+  onToggleSelect,
+  onToggleSelectAll,
+  onViewSingle,
+  onDeleteSingle,
+}: MediaTableProps) {
+  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 formatBytes = (bytes: number) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  const SortIcon = ({ column }: { column: MediaSortColumn }) => {
+    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-700 opacity-100" : "text-gray-400"}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <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-700 opacity-100" : "text-gray-400"}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    );
+  };
+
+  const getMimeTypeBadge = (mimeType: string) => {
+    if (mimeType.includes("image")) {
+      return (
+        <Badge size="sm" variant="light" color="success">
+          Hình ảnh
+        </Badge>
+      );
+    }
+    if (mimeType.includes("pdf") || mimeType.includes("word") || mimeType.includes("document")) {
+      return (
+        <Badge size="sm" variant="light" color="warning">
+          Tài liệu
+        </Badge>
+      );
+    }
+    return (
+      <Badge size="sm" variant="light" color="light">
+        Khác
+      </Badge>
+    );
+  };
+
+  const isAllSelected = data.length > 0 && selectedIds.length === data.length;
+
+  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-[1000px]">
+          <Table>
+            <TableHeader className="border-b border-gray-100 dark:border-white/[0.05]">
+              <TableRow>
+                <TableCell isHeader className="px-5 py-3 w-12 text-center">
+                  <input
+                    type="checkbox"
+                    checked={isAllSelected}
+                    onChange={(e) => onToggleSelectAll(e.target.checked)}
+                    className="w-4 h-4 text-brand-500 border-gray-300 rounded cursor-pointer focus:ring-brand-500 dark:bg-gray-800 dark:border-gray-600"
+                  />
+                </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 select-none" onClick={() => onSort("original_name")}>
+                    Tên tệp <SortIcon column="original_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 select-none" onClick={() => onSort("mime_type")}>
+                    Định dạng <SortIcon column="mime_type" />
+                  </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 select-none" onClick={() => onSort("size")}>
+                    Kích thước <SortIcon column="size" />
+                  </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 select-none" onClick={() => onSort("created_at")}>
+                    Ngày tải lên <SortIcon column="created_at" />
+                  </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 select-none" onClick={() => onSort("updated_at")}>
+                    Cập nhật <SortIcon column="updated_at" />
+                  </div>
+                </TableCell>
+                <TableCell isHeader className="px-5 py-3 font-medium text-center text-gray-500 text-theme-xs dark:text-gray-400 min-w-[120px]">
+                  Thao tác
+                </TableCell>
+              </TableRow>
+            </TableHeader>
+
+            <TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
+              {data.length > 0 ? (
+                data.map((item, idx) => (
+                  <TableRow
+                    key={item.id}
+                    className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors"
+                  >
+                    {/* Yêu cầu 1: Cột 0 - Ô hình vuông chọn từng item */}
+                    <TableCell className="px-5 py-4 text-center">
+                      <input
+                        type="checkbox"
+                        checked={selectedIds.includes(item.id)}
+                        onChange={() => onToggleSelect(item.id)}
+                        className="w-4 h-4 text-brand-500 border-gray-300 rounded cursor-pointer focus:ring-brand-500 dark:bg-gray-800 dark:border-gray-600"
+                      />
+                    </TableCell>
+                    <TableCell className="px-5 py-4 text-start font-mono text-theme-xs truncate max-w-[250px]">
+                      {item.original_name}
+                    </TableCell>
+                    <TableCell className="px-5 py-4 text-start">
+                      <div className="flex flex-col gap-1">
+                        <div>{getMimeTypeBadge(item.mime_type)}</div>
+                        <span className="text-[10px] text-gray-400">{item.mime_type}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="px-5 py-4 text-start text-theme-sm font-medium">
+                      {formatBytes(item.size)}
+                    </TableCell>
+                    <TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
+                      {formatDate(item.created_at)}
+                    </TableCell>
+                    <TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
+                      {formatDate(item.updated_at)}
+                    </TableCell>
+                    <TableCell className="px-5 py-4 text-center">
+                      <div className="flex items-center justify-center gap-4">
+                        <button
+                          onClick={() => onViewSingle(item, idx)}
+                          className="text-brand-500 hover:text-brand-600 font-medium text-theme-sm"
+                        >
+                          Xem
+                        </button>
+                        <button
+                          onClick={() => onDeleteSingle(item.id)}
+                          className="text-red-500 hover:text-red-600 font-medium text-theme-sm"
+                        >
+                          Xóa
+                        </button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={7}
+                    className="px-5 py-20 text-center text-gray-500 italic"
+                  >
+                    Không tìm thấy tệp tin nào
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/user-profile/AccountDetails.tsx
+++ b/src/components/user-profile/AccountDetails.tsx
@@ -22,6 +22,8 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
  });

  const [showOldPass, setShowOldPass] = useState(false);
+  const [showNewPass, setShowNewPass] = useState(false);
+  const [showConfirmPass, setShowConfirmPass] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
@@ -32,6 +34,8 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
        confirm_password: "",
      });
      setShowOldPass(false);
+      setShowNewPass(false);
+      setShowConfirmPass(false);
      setError("");
    }
  }, [isOpen]);
@@ -74,10 +78,15 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
        `${err?.response?.data?.message}, Cập nhật thất bại, vui lòng kiểm tra lại thông tin. Mật khẩu tối thiểu 8 ký tự, 1 in hoa, 1 số và 1 ký tự đặc biệt.` ||
          "Failed to update password. Please check your current password.",
      );
-      toast.error(err?.response?.data?.message || "Cập nhật thất bại, vui lòng kiểm tra lại thông tin!");
+      toast.error(
+        err?.response?.data?.message ||
+          "Cập nhật thất bại, vui lòng kiểm tra lại thông tin!",
+      );
    }
  };
-
+  const isPasswordMismatch =
+    formValues.confirm_password.length > 0 &&
+    formValues.new_password !== formValues.confirm_password;
  return (
    <>
      <div className="p-5 border border-red-200 rounded-2xl dark:border-gray-800 lg:p-6">
@@ -149,7 +158,6 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
                  />
                </div>

-                {/* 2. Current Password - CÓ NÚT HIỆN MẬT KHẨU */}
                <div className="col-span-2 relative">
                  <Label>Current Password</Label>
                  <div className="relative">
@@ -174,28 +182,63 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
                  </div>
                </div>

-                {/* 3. New Password - LUÔN ẨN */}
-                <div className="col-span-2 lg:col-span-1">
+                <div className="col-span-2 relative">
                  <Label>New Password</Label>
-                  <Input
-                    type="text"
-                    name="new_password"
-                    placeholder="Enter new password"
-                    defaultValue={formValues.new_password}
-                    onChange={handleChange}
-                  />
+                  <div className="relative">
+                    <Input
+                      type={showNewPass ? "text" : "password"}
+                      name="new_password"
+                      placeholder="Enter new password"
+                      defaultValue={formValues.new_password}
+                      onChange={handleChange}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowNewPass(!showNewPass)}
+                      className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                    >
+                      {showNewPass ? (
+                        <EyeCloseIcon className="w-5 h-5" />
+                      ) : (
+                        <EyeIcon className="w-5 h-5" />
+                      )}
+                    </button>
+                  </div>
                </div>
-
-                {/* 4. Confirm New Password - LUÔN ẨN */}
-                <div className="col-span-2 lg:col-span-1">
+                <div className="col-span-2 relative">
                  <Label>Confirm New Password</Label>
-                  <Input
-                    type="text"
-                    name="confirm_password"
-                    placeholder="Re-type new password"
-                    defaultValue={formValues.confirm_password}
-                    onChange={handleChange}
-                  />
+                  <div className="relative">
+                    <Input
+                      type={showConfirmPass ? "text" : "password"}
+                      name="confirm_password"
+                      placeholder="Confirm new password"
+                      defaultValue={formValues.confirm_password}
+                      onChange={handleChange}
+                      // Thêm class viền đỏ ở đây
+                      className={
+                        isPasswordMismatch
+                          ? "border-red-500 focus:border-red-500 dark:border-red-500"
+                          : ""
+                      }
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowConfirmPass(!showConfirmPass)}
+                      className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                    >
+                      {showConfirmPass ? (
+                        <EyeCloseIcon className="w-5 h-5" />
+                      ) : (
+                        <EyeIcon className="w-5 h-5" />
+                      )}
+                    </button>
+                  </div>
+                  {/* Thêm một dòng text báo lỗi nhỏ ngay dưới ô input nếu muốn */}
+                  {isPasswordMismatch && (
+                    <p className="mt-1 text-xs text-red-500">
+                      Mật khẩu không khớp!
+                    </p>
+                  )}
                </div>
              </div>

@@ -211,7 +254,11 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
              >
                Close
              </Button>
-              <Button size="sm" type="submit" className="bg-red-500 hover:bg-red-600 ">
+              <Button
+                size="sm"
+                type="submit"
+                className="bg-red-500 hover:bg-red-600 "
+              >
                Save Changes
              </Button>
            </div>
--- a/src/components/user-profile/Media.tsx
+++ b/src/components/user-profile/Media.tsx
@@ -258,7 +258,7 @@ export default function MediaLibrary({
    <div className="rounded-2xl border border-gray-200 bg-white p-6  dark:border-zinc-800 dark:bg-zinc-900/50">
      <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
        <h3 className="text-xl font-bold text-gray-800 dark:text-white/90">
-          Media Assets{" "}
+          Media Assets
          <span className="ml-2 text-sm font-normal text-gray-500">
            ({localMedia.length} tệp)
          </span>
@@ -333,7 +333,7 @@ export default function MediaLibrary({
              Tài liệu ({documentFiles.length})
            </h4>
            <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8">
-              {" "}
+             
              {displayedDocs.map((item, idx) =>
                renderItemCard(item, false, idx),
              )}
--- a/src/components/user-profile/UserMetaCard.tsx
+++ b/src/components/user-profile/UserMetaCard.tsx
@@ -7,6 +7,7 @@ import { uploadMedia } from "@/service/mediaService";
 import { toast } from "sonner";
 import { apiUpdateUser } from "@/service/userService";
 import { URL_MEDIA } from "../../../api";
+import { useRouter } from "next/navigation";

 export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
  const currentAvatar =
@@ -15,6 +16,8 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
  const [isUploading, setIsUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

+  const router = useRouter();
+
  useEffect(() => {
    if (data.data?.profile?.avatar_url) {
      setPreviewImage(data.data.profile.avatar_url);
@@ -49,15 +52,11 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
        if (data.data) {
          try {
            await apiUpdateUser({ avatar_url: url });
+            window.location.href = window.location.pathname;
            toast.success("Cập nhật avatar thành công!");
-            setTimeout(() => {
-              window.location.reload();
-            }, 1000);
          } catch (error) {
            console.error("Lỗi khi cập nhật avatar:", error);
-            toast.warning(
-              "Ảnh đã được tải lên nhưng không thể cập nhật hồ sơ. Vui lòng thử lại!",
-            );
+            toast.warning("Lỗi khi cập nhật ảnh đại diện. Vui lòng thử lại!");
          }
        }
      }
--- a/src/service/mediaService.ts
+++ b/src/service/mediaService.ts
@@ -116,4 +116,15 @@ export const deleteMedia = async (mediaIds: string[]) => {
    }
  });
  return response?.data;
+}
+export const deleteMediaById = async (mediaId: string) => {
+  const response = await api.delete(API.Media.DELETE_MEDIA_BY_ID(mediaId));
+  return response?.data;
+}
+
+export const getMedia = async (payload: any) => {
+  const response = await api.get(API.Media.GET_MEDIA, {
+    params: payload,
+  });
+  return response?.data;
 }