update: management project

Co-authored-by: Copilot <copilot@github.com>

api.ts

@@ -7,9 +7,11 @@ export const API = {
     MEDIA: `${API_URL_ROOT}/users/current/media`,
     Update: `${API_URL_ROOT}/users/current`,
     CHANGE_PASSWORD: `${API_URL_ROOT}/users/current/password`,
-    APPLICATION: `${API_URL_ROOT}/users/current/application`
+    APPLICATION: `${API_URL_ROOT}/users/current/application`,
+    CURRENT_PROJECT: `${API_URL_ROOT}/users/current/project`
   },
   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}`,
@@ -40,5 +42,20 @@ export const API = {
     CREATE_CV: `${API_URL_ROOT}/historian/application`,
     APPLICATION: `${API_URL_ROOT}/historian/application`,
     DELETE_CV: (Id: number | string) => `${API_URL_ROOT}/historian/application/${Id}`,
-  }
+  },
+  Project: {
+    GET_CURRENT_PROJECT: `${API_URL_ROOT}/users/current/project`,
+    CREATE: `${API_URL_ROOT}/projects`,
+    GET_ALL: `${API_URL_ROOT}/projects`,
+    GET_DETAIL: (id: number | string) => `${API_URL_ROOT}/projects/${id}`,
+    UPDATE: (id: number | string) => `${API_URL_ROOT}/projects/${id}`,
+    DELETE: (id: number | string) => `${API_URL_ROOT}/projects/${id}`,
+    ADD_MEMBER: (id: number | string) => `${API_URL_ROOT}/projects/${id}/members`,
+    UPDATE_MEMBER: (id: number | string, userId: number | string) => `${API_URL_ROOT}/projects/${id}/members/${userId}`,
+    REMOVE_MEMBER: (id: number | string, userId: number | string) => `${API_URL_ROOT}/projects/${id}/members/${userId}`,
+    CHANGE_OWNER: (id: number | string) => `${API_URL_ROOT}/projects/${id}/change-owner`,
+    CREATE_COMMIT: (id: number | string) => `${API_URL_ROOT}/projects/${id}/commits`,
+    GET_COMMITS: (id: number | string) => `${API_URL_ROOT}/projects/${id}/commits`,
+    RESTORE_COMMIT: (id: number | string) => `${API_URL_ROOT}/projects/${id}/commits/restore`,
+  },
 }

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

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

@@ -187,7 +187,7 @@ export default function HistorianApplicationPage() {
 
   const pagination = tableData?.pagination;
 
-  console.log(tableData)
+  // console.log(tableData)
   // console.log("Pagination info:", pagination);
   return (
     <div>
@@ -230,6 +230,7 @@ export default function HistorianApplicationPage() {
               />
             </div>
 
+            {/* CẬP NHẬT: Loại xác minh */}
             <div>
               <label className="block mb-2 text-sm font-medium">
                 Loại xác minh
@@ -240,13 +241,14 @@ export default function HistorianApplicationPage() {
                 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="1">Thẻ nhận dạng nhà nghiên cứu</option>
-                <option value="2">Bằng cấp</option>
-                <option value="3">Chuyên gia</option>
-                <option value="4">Khác</option>
+                <option value="ID_CARD">Thẻ nhận dạng nhà nghiên cứu</option>
+                <option value="EDUCATION">Bằng cấp</option>
+                <option value="EXPERT">Chuyên gia</option>
+                <option value="OTHER">Khác</option>
               </select>
             </div>
 
+            {/* CẬP NHẬT: Trạng thái */}
             <div>
               <label className="block mb-2 text-sm font-medium">
                 Trạng thái
@@ -257,9 +259,9 @@ export default function HistorianApplicationPage() {
                 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="1">Đang chờ duyệt</option>
-                <option value="2">Đã duyệt</option>
-                <option value="3">Từ chối</option>
+                <option value="PENDING">Đang chờ duyệt</option>
+                <option value="APPROVED">Đã duyệt</option>
+                <option value="REJECTED">Từ chối</option>
               </select>
             </div>
 
@@ -354,4 +356,4 @@ export default function HistorianApplicationPage() {
       />
     </div>
   );
-}
+}

src/app/(admin)/(others-pages)/(management)/assets/page.tsx

@@ -0,0 +1,481 @@
+"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>
+
+      {index >= 0 && tableData?.data && tableData.data[index] && (
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm transition-opacity"
+          onClick={() => setIndex(-1)} // Click ra vùng tối sẽ đóng
+        >
+          <div
+            className="relative flex flex-col items-center justify-center p-4 max-w-[90vw] max-h-[90vh]"
+            onClick={(e) => e.stopPropagation()} // Bấm vào ảnh không bị đóng
+          >
+            {/* Nút X đóng Modal */}
+            <button
+              onClick={() => setIndex(-1)}
+              className="absolute -top-12 right-0 md:-right-12 text-white/70 hover:text-white transition-colors p-2"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-8 h-8"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+
+            <img
+              src={`${URL_MEDIA}${tableData.data[index].storage_key}`}
+              alt={tableData.data[index].original_name}
+              className="max-w-full max-h-[80vh] object-contain rounded-lg shadow-2xl"
+            />
+
+            <p className="mt-4 text-sm font-medium text-white/90 truncate max-w-full">
+              {tableData.data[index].original_name}
+            </p>
+          </div>
+        </div>
+      )}
+    </div> 
+  );
+}

src/app/(admin)/(others-pages)/(management)/project/page.tsx

@@ -0,0 +1,234 @@
+"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 ProjectsTable, {
+  ProjectItem,
+  ProjectSortColumn,
+} from "@/components/tables/ProjectsTable";
+
+import {
+  getProjects,
+  updateProject,
+  deleteProject,
+  transferProjectOwnership,
+} from "@/service/projectService";
+import Swal from "sweetalert2";
+import { useRouter } from "next/navigation";
+import { LIMIT_ITEM_TABLE } from "../../../../../../constant";
+import { ProjectsResponse } from "@/interface/project";
+
+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 default function ProjectsPage(_props: {
+  params: unknown;
+  searchParams: unknown;
+}) {
+  const router = useRouter();
+  const [page, setPage] = useState<number>(1);
+  const [limitInput, setLimitInput] = useState<string>(
+    LIMIT_ITEM_TABLE.toString(),
+  );
+
+  // Filters state
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const [userIdsFilter, setUserIdsFilter] = 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,
+    statuses: "",
+    userIds: "",
+    fromDate: "",
+    fromTime: "",
+    toDate: "",
+    toTime: "",
+  });
+
+  const [tableData, setTableData] = useState<ProjectsResponse<ProjectItem> | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const [sortBy, setSortBy] = useState<ProjectSortColumn>("created_at");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+
+  const handleReset = () => {
+    setSearchTerm("");
+    setStatusFilter("");
+    setUserIdsFilter("");
+    setLimitInput(LIMIT_ITEM_TABLE.toString());
+    setFromDate("");
+    setFromTime("");
+    setToDate("");
+    setToTime("");
+    setPage(1);
+  };
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedParams({
+        search: searchTerm,
+        limit: parseInt(limitInput) || LIMIT_ITEM_TABLE,
+        statuses: statusFilter,
+        userIds: userIdsFilter,
+        fromDate,
+        fromTime,
+        toDate,
+        toTime,
+      });
+      setPage(1);
+    }, 100);
+    return () => clearTimeout(handler);
+  }, [
+    searchTerm,
+    limitInput,
+    statusFilter,
+    userIdsFilter,
+    fromDate,
+    fromTime,
+    toDate,
+    toTime,
+  ]);
+
+  const fetchProjectsData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const payload: any = {
+        page: page,
+        limit: debouncedParams.limit,
+        search: debouncedParams.search || undefined,
+        sort: sortBy,
+        order: sortOrder,
+        statuses: debouncedParams.statuses || undefined,
+        user_ids: debouncedParams.userIds || undefined,
+      };
+
+      const createdFrom = formatDateTimeToISO(debouncedParams.fromDate, debouncedParams.fromTime);
+      if (createdFrom) payload.created_from = createdFrom;
+      const createdTo = formatDateTimeToISO(debouncedParams.toDate, debouncedParams.toTime, true);
+      if (createdTo) payload.created_to = createdTo;
+      
+      const response = await getProjects(payload);
+
+      if (response?.status) {
+        setTableData(response as unknown as ProjectsResponse<ProjectItem>);
+      }
+    } catch (err) {
+      toast.error("Lỗi lấy danh sách dự án");
+      console.error("Lỗi lấy danh sách dự án:", err);
+      setTableData(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, debouncedParams, sortBy, sortOrder]);
+
+  useEffect(() => {
+    fetchProjectsData();
+  }, [fetchProjectsData]);
+
+  const handleSort = (column: ProjectSortColumn) => {
+    setPage(1);
+    if (sortBy === column) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(column);
+      setSortOrder("desc");
+    }
+  };
+
+
+  const handleViewDetails = (id: string) => {
+    router.push(`/projects/${id}`);
+  };
+
+  const pagination = tableData?.pagination;
+
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Quản lý dự án" />
+
+      <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">
+              <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">
+            <input type="text" placeholder="Tên dự án, 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" />
+            <select value={statusFilter} onChange={(e) => setStatusFilter(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ả trạng thái</option>
+              <option value="PUBLIC">PUBLIC</option>
+              <option value="PRIVATE">PRIVATE</option>
+              <option value="ARCHIVE">ARCHIVE</option>
+            </select>
+            <input type="text" placeholder="IDs người dùng (cách nhau bởi dấu phẩy)" value={userIdsFilter} onChange={(e) => setUserIdsFilter(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 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 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>
+            <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>
+        </ComponentCard>
+
+        <ComponentCard
+          title="Danh sách dự án"
+        >
+          <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>
+            )}
+
+            <ProjectsTable
+              data={tableData?.data || []}
+              onSort={handleSort}
+              sortBy={sortBy}
+              sortOrder={sortOrder}
+              
+              onViewDetails={handleViewDetails}
+            />
+          </div>
+
+          <div className="flex items-center justify-between mt-6">
+            <p className="text-sm text-gray-500">
+              Hiển thị {pagination?.total_records || 0} dự án
+            </p>
+
+            {pagination && pagination.total_pages > 1 && (
+              <Pagination
+                currentPage={pagination.current_page}
+                totalPages={pagination.total_pages}
+                onPageChange={(newPage) => setPage(newPage)}
+              />
+            )}
+          </div>
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(others-pages)/(management)/user-information/page.tsx

@@ -292,7 +292,7 @@ export default function UserTable() {
 
             <div>
               <label className="block mb-2 text-sm font-medium">
-                Auth Provider
+                Phương thức đăng nhập
               </label>
               <select
                 value={authProvider}
@@ -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) =>

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.",
@@ -94,7 +95,7 @@ export default function ApplicationDetailPage() {
           background: isDarkMode ? "#18181b" : "#fff",
           color: isDarkMode ? "#fff" : "#000",
         });
-        router.push("/profile");
+        router.push("/account");
       } catch (error: any) {
         setErrMessage(
           error.response?.data?.message || "Có lỗi xảy ra khi xóa!",

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

@@ -1,5 +0,0 @@
-export default function Page() {
-  return (
-    <div className=''>Page</div>
-  )
-}

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

src/app/(admin)/(others-pages)/projects/[id]/page.tsx

@@ -0,0 +1,622 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { toast } from "sonner";
+import {
+  getProjectDetailByID,
+  updateProject,
+  transferProjectOwnership,
+  addProjectMember,
+  updateProjectMemberRole,
+  removeProjectMember,
+  deleteProject,
+} from "@/service/projectService";
+import { Project } from "@/interface/project";
+import Swal from "sweetalert2";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+
+type TabType = "overview" | "members" | "settings";
+
+export default function ProjectDetailsPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+
+  const [project, setProject] = useState<Project | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabType>("overview");
+
+  const [editForm, setEditForm] = useState({
+    title: "",
+    description: "",
+    status: "PRIVATE" as any,
+  });
+  const [newOwnerId, setNewOwnerId] = useState("");
+  const [newMember, setNewMember] = useState({
+    user_id: "",
+    role: "EDITOR" as any,
+  });
+
+  const fetchProject = async () => {
+    setLoading(true);
+    try {
+      const res = await getProjectDetailByID(id);
+      if (res?.status && res.data) {
+        setProject(res.data);
+        setEditForm({
+          title: res.data.title,
+          description: res.data.description,
+          status: res.data.project_status,
+        });
+      }
+    } catch (error) {
+      toast.error("Lỗi khi tải dữ liệu dự án");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (id) fetchProject();
+  }, [id]);
+
+  const handleUpdateInfo = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await updateProject(id, editForm);
+      toast.success("Cập nhật thông tin thành công!");
+      fetchProject();
+    } catch (error) {
+      toast.error("Cập nhật thất bại");
+    }
+  };
+
+  const handleTransferOwnership = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const memberName =
+      project?.members?.find((m) => m.user_id === newOwnerId)?.display_name ||
+      "thành viên này";
+
+    const result = await Swal.fire({
+      title: "Chuyển quyền sở hữu?",
+      html: `Bạn có chắc chắn muốn chuyển dự án này cho <b>${memberName}</b>?<br/>Hành động này <b>không thể hoàn tác</b> và bạn sẽ không còn là chủ sở hữu nữa.`,
+      icon: "error",
+      showCancelButton: true,
+      confirmButtonColor: "#238636",
+      cancelButtonColor: "#30363d",
+      confirmButtonText: "Tôi hiểu, chuyển quyền sở hữu",
+      cancelButtonText: "Hủy bỏ",
+      color: "#333",
+      customClass: {
+        popup: "border border-[#30363d] rounded-xl",
+      },
+    });
+
+    if (result.isConfirmed) {
+      try {
+        const res = await transferProjectOwnership(id, {
+          new_owner_id: newOwnerId,
+        });
+        if (res?.status) {
+          toast.success("Đã chuyển quyền sở hữu thành công!");
+          setNewOwnerId("");
+          fetchProject();
+        } else {
+          toast.error(res?.message || "Chuyển quyền thất bại");
+        }
+      } catch (error) {
+        toast.error("Lỗi hệ thống khi chuyển quyền");
+      }
+    }
+  };
+
+  const handleAddMember = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newMember.user_id) return toast.error("Vui lòng nhập User ID");
+    try {
+      await addProjectMember(id, newMember);
+      toast.success("Thêm thành viên thành công");
+      setNewMember({ user_id: "", role: "EDITOR" });
+      fetchProject();
+    } catch (error) {
+      toast.error("Lỗi thêm thành viên");
+    }
+  };
+
+  const handleUpdateRole = async (userId: string, newRole: string) => {
+    try {
+      const res = await updateProjectMemberRole(id, userId, {
+        role: newRole as any,
+      });
+
+      if (res?.status) {
+        toast.success("Cập nhật quyền thành công");
+        fetchProject();
+      } else {
+        toast.error(res?.message || "Cập nhật quyền thất bại");
+      }
+    } catch (error: any) {
+      const errorMessage =
+        error.response?.data?.message || "Cập nhật quyền thất bại";
+      toast.error(errorMessage);
+    }
+  };
+
+  const handleRemoveMember = async (userId: string) => {
+    // 1. Hiển thị hộp thoại xác nhận bằng SweetAlert2
+    const result = await Swal.fire({
+      title: "Xác nhận xóa?",
+      text: "Bạn có chắc chắn muốn xóa thành viên này khỏi dự án?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#3085d6",
+      cancelButtonColor: "#d33",
+      confirmButtonText: "Đồng ý",
+      cancelButtonText: "Hủy",
+    });
+
+    if (!result.isConfirmed) return;
+
+    try {
+      const res = await removeProjectMember(id, userId);
+
+      if (res?.status) {
+        toast.success("Đã xóa thành viên");
+      } else {
+        toast.error(res?.message || "Xóa thành viên thất bại");
+      }
+    } catch (error: any) {
+      const errorMessage =
+        error.response?.data?.message || "Xóa thành viên thất bại";
+      toast.error(errorMessage);
+
+      console.error("Remove Member Error:", error);
+    } finally {
+      fetchProject();
+    }
+  };
+
+  const handleDeleteProject = async () => {
+    const result = await Swal.fire({
+      title: "Xác nhận xóa dự án?",
+      text: "Hành động này sẽ xóa vĩnh viễn dự án. Bạn không thể hoàn tác sau khi xác nhận!",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#d33",
+      cancelButtonColor: "#30363d",
+      confirmButtonText: "Tôi hiểu, xóa dự án này",
+      cancelButtonText: "Hủy",
+      color: "#333",
+      customClass: {
+        popup: "border border-[#30363d] rounded-xl",
+      },
+    });
+
+    if (result.isConfirmed) {
+      try {
+        const res = await deleteProject(id);
+        if (res?.status) {
+          toast.success("Đã xóa dự án thành công");
+          router.push("/project");
+        } else {
+          toast.error(res?.message || "Xóa dự án thất bại");
+        }
+      } catch (error) {
+        toast.error("Đã xảy ra lỗi khi kết nối máy chủ");
+        console.error(error);
+      }
+    }
+  };
+
+  if (loading)
+    return (
+      <div className="flex justify-center p-20 text-gray-500">
+        Đang tải dữ liệu...
+      </div>
+    );
+  if (!project)
+    return (
+      <div className="flex justify-center p-20 text-red-500">
+        Không tìm thấy dự án
+      </div>
+    );
+
+  return (
+    <div className="min-h-screen  dark:bg-[#0d1117] text-gray-900 dark:text-[#c9d1d9] font-sans">
+      <PageBreadcrumb pageTitle="Chi tiết dự án" />
+      <div className="pt-8 border-b border-gray-200 dark:border-[#30363d] bg-gray-50 dark:bg-[#0d1117]">
+        <div className="px-6">
+          <div className="flex items-center gap-2 text-xl mb-6">
+            <div className="w-8 h-8 shrink-0 flex items-center justify-center">
+              {project.user?.avatar_url ? (
+                <div className="relative w-8 h-8 rounded-full overflow-hidden border border-gray-200 dark:border-gray-800">
+                  <Image
+                    src={project.user.avatar_url}
+                    alt="avatar"
+                    fill
+                    className="object-cover rounded-full"
+                  />
+                </div>
+              ) : (
+                <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border border-gray-300 dark:border-gray-600">
+                  <span className="text-[10px] font-bold text-gray-500 dark:text-gray-300 leading-none">
+                    {project.user?.display_name?.charAt(0)?.toUpperCase() ||
+                      "U"}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            <span className="font-medium text-blue-600 dark:text-[#58a6ff] hover:underline cursor-pointer">
+              {project.user?.display_name}
+            </span>
+            <span className="text-gray-400">/</span>
+            <strong className="font-semibold text-blue-600 dark:text-[#58a6ff] hover:underline cursor-pointer">
+              {project.title}
+            </strong>
+            <span className="ml-2 px-2.5 py-0.5 text-xs font-medium rounded-full border border-gray-200 dark:border-[#30363d] text-gray-500 dark:text-[#8b949e]">
+              {project.project_status}
+            </span>
+          </div>
+
+          <div className="flex gap-4">
+            {[
+              {
+                id: "overview",
+                label: "Overview",
+                icon: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+              },
+              {
+                id: "members",
+                label: `Members`,
+                count: project.members?.length || 0,
+                icon: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z",
+              },
+              {
+                id: "settings",
+                label: "Settings",
+                icon: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z",
+              },
+            ].map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id as TabType)}
+                className={`flex items-center gap-2 px-3 py-2.5 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === tab.id
+                    ? "border-[#f78166] text-gray-900 dark:text-[#c9d1d9]"
+                    : "border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-[#8b949e]"
+                }`}
+              >
+                <svg
+                  className="w-4 h-4 opacity-70"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d={tab.icon}
+                  />
+                </svg>
+                {tab.label}
+                {tab.count !== undefined && (
+                  <span className="ml-1 px-2 py-0.5 text-xs rounded-full bg-gray-200/50 dark:bg-[#21262d] text-gray-600 dark:text-[#c9d1d9]">
+                    {tab.count}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="px-6 py-8">
+        {activeTab === "overview" && (
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="md:col-span-3">
+              <div className="border border-gray-200 dark:border-[#30363d] rounded-xl overflow-hidden ">
+                <div className="bg-gray-50 dark:bg-[#161b22] px-5 py-3 border-b border-gray-200 dark:border-[#30363d] font-semibold text-sm text-gray-800 dark:text-[#c9d1d9]">
+                  About
+                </div>
+                <div className="p-6 bg-white dark:bg-[#0d1117] text-[15px] leading-relaxed text-gray-700 dark:text-[#8b949e]">
+                  {project.description || (
+                    <i className="text-gray-400">
+                      Không có mô tả cho dự án này.
+                    </i>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="md:col-span-1 space-y-6">
+              <div>
+                <h3 className="font-semibold text-sm mb-4 border-b border-gray-200 dark:border-[#30363d] pb-2 text-gray-800 dark:text-[#c9d1d9]">
+                  Owner
+                </h3>
+                <div className="flex items-center gap-3">
+                  <div className="w-8 h-8 shrink-0 flex items-center justify-center">
+                    {project.user?.avatar_url ? (
+                      <div className="relative w-8 h-8 rounded-full overflow-hidden border border-gray-200 dark:border-gray-800">
+                        <Image
+                          src={project.user.avatar_url}
+                          alt="avatar"
+                          fill
+                          className="object-cover rounded-full"
+                        />
+                      </div>
+                    ) : (
+                      <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border border-gray-300 dark:border-gray-600">
+                        <span className="text-[10px] font-bold text-gray-500 dark:text-gray-300 leading-none">
+                          {project.user?.display_name
+                            ?.charAt(0)
+                            ?.toUpperCase() || "U"}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                  <div className="overflow-hidden">
+                    <div className="font-semibold text-sm text-gray-800 dark:text-[#c9d1d9] truncate">
+                      {project.user?.display_name}
+                    </div>
+                    <div className="text-xs text-gray-500 dark:text-[#8b949e] truncate">
+                      {project.user?.email || "No email"}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === "members" && (
+          <div className="max-w-4xl">
+            <h2 className="text-2xl font-normal mb-6 pb-2 border-b border-gray-200 dark:border-[#30363d]">
+              Manage access
+            </h2>
+
+            <form
+              onSubmit={handleAddMember}
+              className="flex flex-col sm:flex-row gap-3 mb-8 p-5 border border-gray-200 dark:border-[#30363d] rounded-xl bg-gray-50 dark:bg-[#161b22] "
+            >
+              <input
+                type="text"
+                placeholder="User ID..."
+                value={newMember.user_id}
+                onChange={(e) =>
+                  setNewMember({ ...newMember, user_id: e.target.value })
+                }
+                className="flex-1 px-3 py-2 text-sm rounded-md border border-gray-300 dark:border-[#30363d] bg-white dark:bg-[#0d1117] outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-shadow"
+              />
+              <div className="flex gap-3">
+                <select
+                  value={newMember.role}
+                  onChange={(e) =>
+                    setNewMember({ ...newMember, role: e.target.value as any })
+                  }
+                  className="px-3 py-2 text-sm rounded-md border border-gray-300 dark:border-[#30363d] bg-white dark:bg-[#0d1117] outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 cursor-pointer"
+                >
+                  <option value="EDITOR">Editor</option>
+                  <option value="VIEWER">Viewer</option>
+                </select>
+                <button
+                  type="submit"
+                  className="px-5 py-2 text-sm font-medium text-white bg-[#238636] border border-transparent rounded-md hover:bg-[#2ea043] transition-colors "
+                >
+                  Add member
+                </button>
+              </div>
+            </form>
+
+            <div className="border border-gray-200 dark:border-[#30363d] rounded-xl overflow-hidden ">
+              <div className="divide-y divide-gray-200 dark:divide-[#30363d]">
+                {project.members && project.members.length > 0 ? (
+                  project.members.map((member) => (
+                    <div
+                      key={member.user_id}
+                      className="flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-[#161b22]/50 transition-colors"
+                    >
+                      <div className="flex items-center gap-4">
+                        <img
+                          src={
+                            member.avatar_url ||
+                            "https://github.com/identicons/jasonlong.png"
+                          }
+                          alt={member.display_name}
+                          className="w-10 h-10 rounded-full border border-gray-200 dark:border-gray-700"
+                        />
+                        <div>
+                          <div className="font-semibold text-sm text-gray-800 dark:text-[#c9d1d9]">
+                            {member.display_name}
+                          </div>
+                          <div className="text-xs text-gray-500 dark:text-[#8b949e]">
+                            ID: {member.user_id}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <select
+                          value={member.role}
+                          onChange={(e) =>
+                            handleUpdateRole(member.user_id, e.target.value)
+                          }
+                          className="text-sm px-3 py-1.5 rounded-md border border-gray-300 dark:border-[#30363d] bg-white dark:bg-[#21262d] outline-none hover:bg-gray-50 dark:hover:bg-[#30363d] cursor-pointer transition-colors"
+                        >
+                          <option value="EDITOR">Editor</option>
+                          <option value="VIEWER">Viewer</option>
+                        </select>
+                        <button
+                          onClick={() => handleRemoveMember(member.user_id)}
+                          className="text-red-500 hover:text-red-600 p-2 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                          title="Remove member"
+                        >
+                          <svg
+                            className="w-5 h-5"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="p-8 text-center text-gray-500 dark:text-[#8b949e] text-sm italic">
+                    Chưa có thành viên nào.
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === "settings" && (
+          <div className="max-w-3xl space-y-10">
+            <section>
+              <h2 className="text-2xl font-normal mb-4 pb-2 border-b border-gray-200 dark:border-[#30363d]">
+                General
+              </h2>
+              <form onSubmit={handleUpdateInfo} className="space-y-5">
+                <div>
+                  <label className="block text-sm font-semibold mb-1.5 text-gray-800 dark:text-[#c9d1d9]">
+                    Project name
+                  </label>
+                  <input
+                    type="text"
+                    value={editForm.title}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, title: e.target.value })
+                    }
+                    className="w-full max-w-md px-3 py-2 text-sm rounded-md border border-gray-300 dark:border-[#30363d] bg-white dark:bg-[#0d1117] outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-shadow"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold mb-1.5 text-gray-800 dark:text-[#c9d1d9]">
+                    Description
+                  </label>
+                  <textarea
+                    rows={4}
+                    value={editForm.description}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, description: e.target.value })
+                    }
+                    className="w-full px-3 py-2 text-sm rounded-md border border-gray-300 dark:border-[#30363d] bg-white dark:bg-[#0d1117] outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-shadow"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold mb-1.5 text-gray-800 dark:text-[#c9d1d9]">
+                    Status
+                  </label>
+                  <select
+                    value={editForm.status}
+                    onChange={(e) =>
+                      setEditForm({
+                        ...editForm,
+                        status: e.target.value as any,
+                      })
+                    }
+                    className="w-48 px-3 py-2 text-sm rounded-md border border-gray-300 dark:border-[#30363d] bg-white dark:bg-[#0d1117] outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 cursor-pointer"
+                  >
+                    <option value="PUBLIC">Public</option>
+                    <option value="PRIVATE">Private</option>
+                    <option value="ARCHIVE">Archive</option>
+                  </select>
+                </div>
+                <button
+                  type="submit"
+                  className="px-5 py-2 text-sm font-medium rounded-md bg-[#21262d] text-[#c9d1d9] border border-[#30363d] hover:bg-[#30363d] transition-colors "
+                >
+                  Update settings
+                </button>
+              </form>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-normal text-red-500 mb-4 pb-2 border-b border-red-500/30">
+                Danger Zone
+              </h2>
+              <div className="border border-red-500/30 rounded-xl overflow-hidden">
+                <div className="p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                  <div>
+                    <div className="font-semibold text-sm text-gray-800 dark:text-[#c9d1d9]">
+                      Transfer ownership
+                    </div>
+                    <div className="text-xs text-gray-500 dark:text-[#8b949e] mt-1">
+                      Transfer this project to another member in the project.
+                    </div>
+                  </div>
+                  <form
+                    onSubmit={handleTransferOwnership}
+                    className="flex gap-2"
+                  >
+                    <select
+                      value={newOwnerId}
+                      onChange={(e) => setNewOwnerId(e.target.value)}
+                      className="w-full sm:w-56 px-3 py-2 text-sm rounded-md border border-gray-300 dark:border-[#30363d] bg-white dark:bg-[#0d1117] outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-500 cursor-pointer"
+                      required
+                    >
+                      <option value="" disabled>
+                        -- Thành viên --
+                      </option>
+                      {project.members && project.members.length > 0 ? (
+                        project.members.map((member) => (
+                          <option key={member.user_id} value={member.user_id}>
+                            {member.display_name}
+                          </option>
+                        ))
+                      ) : (
+                        <option value="" disabled>
+                          Chưa có thành viên nào
+                        </option>
+                      )}
+                    </select>
+                    <button
+                      type="submit"
+                      disabled={
+                        !newOwnerId ||
+                        !project.members ||
+                        project.members.length === 0
+                      }
+                      className="shrink-0 px-4 py-2 text-sm font-medium text-red-500 bg-transparent border border-red-500/50 rounded-md hover:bg-red-500 hover:text-white dark:hover:bg-red-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-red-500 dark:disabled:hover:bg-transparent"
+                    >
+                      Transfer
+                    </button>
+                  </form>
+                </div>
+                <div className="p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-red-50/30 dark:hover:bg-red-900/10 transition-colors">
+                  <div>
+                    <div className="font-semibold text-sm text-gray-800 dark:text-[#c9d1d9]">
+                      Delete this project
+                    </div>
+                    <div className="text-xs text-gray-500 dark:text-[#8b949e] mt-1">
+                      Once you delete a project, there is no going back. Please
+                      be certain.
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={handleDeleteProject}
+                    className="shrink-0 px-4 py-2 text-sm font-medium text-red-500 bg-transparent border border-red-500/50 rounded-md hover:bg-red-500 hover:text-white dark:hover:bg-red-900/30 transition-colors"
+                  >
+                    Delete project
+                  </button>
+                </div>
+              </div>
+            </section>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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 {

src/components/auth/SignInForm.tsx

@@ -166,6 +166,7 @@ export default function SignInForm() {
                     type="email"
                     onChange={handleChange}
                     defaultValue={formData.email}
+                    autoComplete="username"
                   />
                 </div>
 
@@ -182,6 +183,7 @@ export default function SignInForm() {
                       placeholder="Min. 8 characters"
                       onChange={handleChange}
                       defaultValue={formData.password}
+                      autoComplete="current-password"
                     />
                     <span
                       onClick={() => setShowPassword(!showPassword)}
@@ -192,7 +194,6 @@ export default function SignInForm() {
                   </div>
                 </div>
 
-                {/* Hiển thị thông báo lỗi nếu có */}
                 {errorMsg && (
                   <p className="text-sm text-red-500 font-medium">{errorMsg}</p>
                 )}

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

src/components/form/input/InputField.tsx

@@ -15,6 +15,7 @@ interface InputProps {
   success?: boolean;
   error?: boolean;
   hint?: string; // Optional hint text
+  autoComplete?: string;
 }
 
 const Input: FC<InputProps> = ({
@@ -32,6 +33,7 @@ const Input: FC<InputProps> = ({
   success = false,
   error = false,
   hint,
+  autoComplete
 }) => {
   // Determine input styles based on state (disabled, success, error)
   let inputClasses = `h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-3 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800 ${className}`;
@@ -61,6 +63,7 @@ const Input: FC<InputProps> = ({
         step={step}
         disabled={disabled}
         className={inputClasses}
+        autoComplete={autoComplete}
       />
 
       {/* Optional Hint Text */}

src/components/header/UserDropdown.tsx

@@ -140,7 +140,7 @@ export default function UserDropdown() {
               Tài Khoản
             </DropdownItem>
           </li>
-          <li>
+          {/* <li>
             <DropdownItem
               onItemClick={closeDropdown}
               tag="a"
@@ -152,7 +152,7 @@ export default function UserDropdown() {
               </span>
               Nhà Sử Học
             </DropdownItem>
-          </li>
+          </li> */}
           {/* <li>
             <DropdownItem
               onItemClick={closeDropdown}

src/components/tables/ApplicationDetailModal.tsx

@@ -13,6 +13,7 @@ import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/captions.css";
 import { IsolatedContent } from "@/components/ui/IsolatedContent";
 import { apiDeleteHistorianCV } from "@/service/historianService";
+import { statusConfig } from "@/service/handler";
 
 interface Props {
   isOpen: boolean;
@@ -101,7 +102,9 @@ export default function ApplicationDetailModal({
   if (!isOpen || !application) return null;
 
   const userData = application.user || {};
-
+  const currentStatus = statusConfig[application.status] || {
+    container: "bg-gray-50 border-gray-200 text-gray-600 shadow-sm",
+  };
   return (
     <div className="fixed inset-0 z-999 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
       <div className="w-full max-w-4xl max-h-[90vh] bg-white rounded-2xl dark:bg-gray-900 flex flex-col overflow-hidden text-gray-800 dark:text-gray-200">
@@ -149,13 +152,18 @@ export default function ApplicationDetailModal({
                   <p className="text-sm text-gray-500">
                     {userData.email || "Không có email"}
                   </p>
-                  <div className="mt-1 flex gap-2">
-                    <span className="px-2 py-0.5 text-[10px] font-bold uppercase text-blue-600 bg-blue-100 rounded-md">
+                  <div className="mt-1 flex gap-2 items-center">
+                    <span className="px-3 py-1 text-[11px] font-bold uppercase text-blue-600 bg-blue-100 rounded-md ">
                       {application.verify_type}
                     </span>
                     <span
-                      className={`px-2 py-0.5 text-[10px] font-semibold uppercase rounded-md ${application.status === "PENDING" ? "bg-yellow-100 text-yellow-600" : "bg-red-100 text-red-500"}`}
-                    >
+                      className={`
+                        inline-flex items-center px-3 py-1 
+                        rounded-md border text-[11px] font-semibold uppercase 
+                        transition-colors duration-200
+                        ${currentStatus.container}
+                      `}
+                        >
                       {application.status}
                     </span>
                   </div>

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 max-w-[100px] truncate">
+                      <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>
+  );
+}

src/components/tables/Pagination.tsx

@@ -9,7 +9,33 @@ const Pagination: React.FC<PaginationProps> = ({
   totalPages,
   onPageChange,
 }) => {
-  const allPages = Array.from({ length: totalPages }, (_, i) => i + 1);
+  const getPaginationItems = () => {
+    const delta = 1;
+    const range = [];
+    for (let i = 1; i <= totalPages; i++) {
+      if (i === 1 || i === totalPages || (i >= currentPage - delta && i <= currentPage + delta)) {
+        range.push(i);
+      }
+    }
+
+    const rangeWithDots: (number | string)[] = [];
+    let l: number | undefined;
+    for (const i of range) {
+      if (l !== undefined) {
+        if (i - l === 2) {
+          rangeWithDots.push(l + 1);
+        } else if (i - l > 2) {
+          rangeWithDots.push('...');
+        }
+      }
+      rangeWithDots.push(i);
+      l = i;
+    }
+
+    return rangeWithDots;
+  };
+
+  const pages = getPaginationItems();
 
   return (
     <div className="flex items-center ">
@@ -21,21 +47,25 @@ const Pagination: React.FC<PaginationProps> = ({
         Previous
       </button>
       <div className="flex items-center gap-2">
-        {currentPage > 3 && <span className="px-2">...</span>}
-        {allPages.map((page) => (
-          <button
-            key={page}
-            onClick={() => onPageChange(page)}
-            className={`px-4 py-2 rounded ${
-              currentPage === page
-                ? "bg-brand-500 text-white"
-                : "text-gray-700 dark:text-gray-400"
-            } flex w-10 items-center justify-center h-10 rounded-lg text-sm font-medium hover:bg-blue-500/[0.08] hover:text-brand-500 dark:hover:text-brand-500`}
-          >
-            {page}
-          </button>
-        ))}
-        {currentPage < totalPages - 2 && <span className="px-2">...</span>}
+        {pages.map((page, index) =>
+          page === '...' ? (
+            <span key={`dots-${index}`} className="flex h-10 w-10 items-center justify-center text-gray-500">
+              ...
+            </span>
+          ) : (
+            <button
+              key={page}
+              onClick={() => onPageChange(page as number)}
+              className={`flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium hover:bg-blue-500/[0.08] hover:text-brand-500 dark:hover:text-brand-500 ${
+                currentPage === page
+                  ? "bg-brand-500 text-white"
+                  : "text-gray-700 dark:text-gray-400"
+              }`}
+            >
+              {page}
+            </button>
+          ),
+        )}
       </div>
 
       <button

src/components/tables/ProjectsTable.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import Image from "next/image";
+import Badge from "../ui/badge/Badge";
+
+export type ProjectSortColumn = "created_at" | "updated_at" | "title";
+
+export interface ProjectItem {
+  id: string;
+  title: string;
+  description: string;
+  project_status: "PRIVATE" | "PUBLIC" | "ARCHIVE";
+  owner_id: string;
+  created_at: string;
+  updated_at: string;
+  user: {
+    id: string;
+    display_name: string;
+    email: string;
+    avatar_url: string;
+  };
+  members?: {
+    user_id: string;
+    role: string;
+    display_name: string;
+    avatar_url: string;
+  }[];
+}
+
+interface ProjectsTableProps {
+  data: ProjectItem[];
+  onSort: (column: ProjectSortColumn) => void;
+  sortBy?: ProjectSortColumn;
+  sortOrder?: "asc" | "desc";
+  onViewDetails: (id: string) => void;
+}
+
+export default function ProjectsTable({
+  data,
+  onSort,
+  sortBy,
+  sortOrder,
+  onViewDetails,
+}: ProjectsTableProps) {
+  const formatDate = (dateString: string | null | undefined) => {
+    if (!dateString) return "-";
+    const date = new Date(dateString);
+    return `Updated on ${date.toLocaleDateString("vi-VN", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    })}`;
+  };
+
+  const getStatusBadge = (status: ProjectItem["project_status"]) => {
+    switch (status) {
+      case "PUBLIC":
+        return (
+          <Badge size="sm" variant="light" color="success">
+            PUBLIC
+          </Badge>
+        );
+      case "PRIVATE":
+        return (
+          <Badge size="sm" variant="light" color="warning">
+            PRIVATE
+          </Badge>
+        );
+      case "ARCHIVE":
+        return (
+          <Badge size="sm" variant="light" color="light">
+            ARCHIVE
+          </Badge>
+        );
+      default:
+        return (
+          <Badge size="sm" variant="light" color="dark">
+            {status}
+          </Badge>
+        );
+    }
+  };
+
+  const SortButton = ({
+    column,
+    label,
+  }: {
+    column: ProjectSortColumn;
+    label: string;
+  }) => {
+    const isActive = sortBy === column;
+    return (
+      <button
+        onClick={() => onSort(column)}
+        className={`w-20 text-sm font-medium text-left hover:text-blue-500 transition-colors ${
+          isActive
+            ? "text-blue-600 dark:text-blue-400"
+            : "text-gray-500 dark:text-gray-400"
+        }`}
+      >
+        {label} {isActive && (sortOrder === "asc" ? "↑" : "↓")}
+      </button>
+    );
+  };
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[700px]">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22]">
+        <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 w-40">
+        </span>
+        <div className="flex items-center gap-4 shrink-0">
+          <span className="text-sm text-gray-500 dark:text-gray-400 w-20">
+            Sắp xếp:
+          </span>
+          <SortButton column="title" label="Tên" />
+          <SortButton column="created_at" label="Ngày tạo" />
+          <SortButton column="updated_at" label="Cập nhật" />
+        </div>
+      </div>
+
+      <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
+        {data.length > 0 ? (
+          data.map((item) => (
+            <div
+              key={item.id}
+              className="group flex flex-col p-5 md:flex-row md:items-center justify-between hover:bg-gray-50 dark:hover:bg-[#161b22] transition-colors"
+            >
+              <div className="flex-1 pr-4 max-w-full md:max-w-[75%]">
+                <div
+                  onClick={() => onViewDetails(item.id)}
+                  className="flex items-center gap-2 mb-2 cursor-pointer hover:underline"
+                >
+                  <div className="w-6 h-6 shrink-0 flex items-center justify-center">
+                    {item.user?.avatar_url ? (
+                      <div className="relative w-6 h-6 rounded-full overflow-hidden border border-gray-200 dark:border-gray-800">
+                        <Image
+                          src={item.user.avatar_url}
+                          alt="avatar"
+                          fill 
+                          className="object-cover rounded-full" 
+                        />
+                      </div>
+                    ) : (
+                      <div className="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border border-gray-300 dark:border-gray-600">
+                        <span className="text-[10px] font-bold text-gray-500 dark:text-gray-300 leading-none">
+                          {item.user?.display_name?.charAt(0)?.toUpperCase() ||
+                            "U"}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex items-center max-w-[250px]">
+                    <span className="text-[14px] font-medium text-gray-700 dark:text-gray-300 truncate">
+                      {item.user?.display_name || "Unknown"}
+                    </span>
+                  </div>
+
+                  <span className="text-[14px] text-gray-400 dark:text-gray-600 shrink-0">
+                    /
+                  </span>
+
+                  <h3 className="text-[14px] font-semibold text-blue-600 dark:text-[#58a6ff] truncate max-w-[300px]">
+                    {item.title}
+                  </h3>
+
+                  <div className="shrink-0 w-20 flex justify-start">
+                    {getStatusBadge(item.project_status)}
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-4 text-xs text-gray-500 dark:text-[#8b949e] h-5">
+                  <span>{formatDate(item.updated_at)}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center mt-4 md:mt-0 w-[120px] justify-end shrink-0">
+                <div className="flex -space-x-2 overflow-hidden">
+                  {item.members && item.members.length > 0 ? (
+                    <>
+                      {item.members.slice(0, 4).map((m, index) =>
+                        m.avatar_url ? (
+                          <Image
+                            key={index}
+                            src={m.avatar_url}
+                            alt={m.display_name}
+                            width={32}
+                            height={32}
+                            title={m.display_name}
+                            className="inline-block w-8 h-8 rounded-full object-cover ring-2 ring-white group-hover:ring-gray-50 dark:ring-[#0d1117] dark:group-hover:ring-[#161b22] transition-colors"
+                          />
+                        ) : (
+                          <div
+                            key={index}
+                            title={m.display_name}
+                            className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 ring-2 ring-white group-hover:ring-gray-50 dark:ring-[#0d1117] dark:group-hover:ring-[#161b22] transition-colors"
+                          >
+                            <span className="text-xs font-medium text-gray-500 dark:text-gray-300">
+                              {m.display_name?.charAt(0)?.toUpperCase() || "U"}
+                            </span>
+                          </div>
+                        ),
+                      )}
+
+                      {item.members.length > 4 && (
+                        <div
+                          title="Những người khác"
+                          className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 ring-2 ring-white group-hover:ring-gray-50 dark:ring-[#0d1117] dark:group-hover:ring-[#161b22] transition-colors z-10"
+                        >
+                          <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                            +{item.members.length - 4}
+                          </span>
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <span className="text-sm text-gray-400 dark:text-gray-600 italic"></span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="p-10 text-center text-gray-500 dark:text-gray-400 italic">
+            Không tìm thấy dự án nào
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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>

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),
               )}

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!");
           }
         }
       }
@@ -160,6 +159,9 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
                 </>
               )}
             </div>
+            <span className="text-sm text-gray-500 dark:text-gray-400">
+              ID: {data.data?.id}
+            </span>
           </div>
         </div>
       </div>

src/interface/common.ts

@@ -0,0 +1,29 @@
+export interface CommonResponse<T = any> {
+  status: boolean;
+  message: string;
+  data: T;
+  errors?: any; // Or a more specific error type
+}
+
+export interface PaginatedResponse<T> {
+  status: boolean;
+  message: string;
+  data: T[];
+  pagination: {
+    current_page: number;
+    page_size: number;
+    total_records: number;
+    total_pages: number;
+  };
+  errors?: any;
+}
+
+export interface CursorPaginatedResponse<T> {
+  status: boolean;
+  message: string;
+  data: {
+    items: T[];
+    next_cursor_id?: string;
+  };
+  errors?: any;
+}

src/interface/project.ts

@@ -0,0 +1,66 @@
+export interface Project {
+  id: string;
+  title: string;
+  description: string;
+  project_status: "PRIVATE" | "PUBLIC" | "ARCHIVE";
+  created_at: string;
+  updated_at: string;
+  is_deleted?: boolean;
+  user_id?: string;
+  user?: {
+    id: string;
+    email: string;
+    display_name: string;
+    avatar_url: string;
+  };
+  commits?: any[];
+  submission_ids?: any[];
+  members?: ProjectMember[];
+}
+export interface ProjectsResponse<T = Project> {
+  status: boolean;
+  message: string;
+  data: T[];
+  pagination: {
+    current_page: number;
+    page_size: number;
+    total_records: number;
+    total_pages: number;
+  };
+}
+export interface UpdateProjectPayload {
+  title: string;
+  description: string;
+  status: "PRIVATE" | "PUBLIC" | "ARCHIVE";
+}
+export interface ChangeOwnerPayload {
+  new_owner_id: string;
+}
+export interface ProjectMemberPayload {
+  user_id?: string;
+  role: "EDITOR" | "VIEWER" | "ADMIN";
+}
+export interface ProjectMember {
+  user_id: string;
+  role: string;
+  display_name: string;
+  avatar_url: string;
+}
+export interface GetProjectsParams {
+  page?: number;
+  limit?: number;
+  search?: string;
+  sort?: "created_at" | "updated_at" | "title";
+  order?: "asc" | "desc";
+  statuses?: string; // comma-separated
+  user_ids?: string; // comma-separated
+  created_from?: string; // ISO date string
+  created_to?: string; // ISO date string
+}
+export interface CreateCommitPayload {
+  edit_summary: string;
+  snapshot_json: number[]; 
+}
+export interface RestoreCommitPayload {
+  commit_id: string;
+}

src/layout/AppSidebar.tsx

@@ -70,6 +70,7 @@ const ALL_NAV_ITEMS: NavItem[] = [
       { name: "Tài Khoản", path: "/user-information", pro: false, roles: ["ADMIN", "MOD"] },
       { name: "Hồ Sơ Nhà Sử Học", path: "/applications", pro: false, roles: ["ADMIN", "MOD"] },
       { name: "Tệp Đăng Tải", path: "/assets", pro: false, roles: ["ADMIN", "MOD"] },
+      { name: "Dự Án", path: "/project", pro: false, roles: ["ADMIN", "MOD"] },
     ],
   },
   {

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

src/service/projectService.ts

@@ -0,0 +1,72 @@
+import api from "@/config/config";
+import { API } from "../../api";
+import { ProjectMemberPayload, ChangeOwnerPayload, CreateCommitPayload, GetProjectsParams, Project, RestoreCommitPayload, UpdateProjectPayload } from "@/interface/project";
+import { CommonResponse, CursorPaginatedResponse, PaginatedResponse } from "@/interface/common";
+
+export const getProjects = async (params: GetProjectsParams): Promise<PaginatedResponse<Project>> => {
+  const response = await api.get(API.Project.GET_ALL, { params });
+  return response?.data;
+};
+
+export const getProjectDetailByID = async (id: string): Promise<CommonResponse<Project>> => {
+  const response = await api.get(API.Project.GET_DETAIL(id));
+  return response?.data;
+};
+
+export const updateProject = async (id: string, payload: UpdateProjectPayload): Promise<CommonResponse<Project>> => {
+  const response = await api.put(API.Project.UPDATE(id), payload);
+  return response?.data;
+};
+
+export const deleteProject = async (id: string): Promise<CommonResponse> => {
+  const response = await api.delete(API.Project.DELETE(id));
+  return response?.data;
+};
+
+export const transferProjectOwnership = async (id: string, payload: ChangeOwnerPayload): Promise<CommonResponse> => {
+  const response = await api.put(API.Project.CHANGE_OWNER(id), payload);
+  return response?.data;
+};
+
+// ==========================================
+// 2. NHÓM: QUẢN LÝ THÀNH VIÊN (MEMBERS)
+// ==========================================
+
+export const addProjectMember = async (id: string, payload: ProjectMemberPayload): Promise<CommonResponse> => {
+  const response = await api.post(API.Project.ADD_MEMBER(id), payload);
+  return response?.data;
+};
+
+export const updateProjectMemberRole = async (id: string, userId: string, payload: ProjectMemberPayload): Promise<CommonResponse> => {
+  const response = await api.put(API.Project.UPDATE_MEMBER(id, userId), payload);
+  return response?.data;
+};
+
+export const removeProjectMember = async (id: string, userId: string): Promise<CommonResponse> => {
+  const response = await api.delete(API.Project.REMOVE_MEMBER(id, userId));
+  return response?.data;
+};
+
+// ==========================================
+// 3. NHÓM: LỊCH SỬ BẢN LƯU (COMMITS)
+// ==========================================
+
+export const createProjectCommit = async (id: string, payload: CreateCommitPayload): Promise<CommonResponse> => {
+  const response = await api.post(API.Project.CREATE_COMMIT(id), payload);
+  return response?.data;
+};
+
+export const getProjectCommits = async (id: string): Promise<CommonResponse> => {
+  const response = await api.get(API.Project.GET_COMMITS(id));
+  return response?.data;
+};
+
+export const restoreProjectCommit = async (id: string, payload: RestoreCommitPayload): Promise<CommonResponse> => {
+  const response = await api.post(API.Project.RESTORE_COMMIT(id), payload);
+  return response?.data;
+};
+
+export const getCurrentProject = async (params?: { cursor_id?: string; limit?: number }): Promise<CursorPaginatedResponse<Project>> => {
+  const response = await api.get(API.Project.GET_CURRENT_PROJECT, { params });
+  return response?.data;
+};