pig update
This commit is contained in:
82
package-lock.json
generated
82
package-lock.json
generated
@@ -30,6 +30,7 @@
|
|||||||
"react-dnd-html5-backend": "^16.0.1",
|
"react-dnd-html5-backend": "^16.0.1",
|
||||||
"react-dom": "^19.2.0",
|
"react-dom": "^19.2.0",
|
||||||
"react-dropzone": "^14.3.8",
|
"react-dropzone": "^14.3.8",
|
||||||
|
"react-quill-new": "^3.8.3",
|
||||||
"react-redux": "^9.2.0",
|
"react-redux": "^9.2.0",
|
||||||
"sonner": "^2.0.7",
|
"sonner": "^2.0.7",
|
||||||
"sweetalert2": "^11.26.24",
|
"sweetalert2": "^11.26.24",
|
||||||
@@ -5867,12 +5868,24 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/eventemitter3": {
|
||||||
|
"version": "5.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
|
||||||
|
"integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/fast-deep-equal": {
|
"node_modules/fast-deep-equal": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/fast-diff": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
|
||||||
|
"license": "Apache-2.0"
|
||||||
|
},
|
||||||
"node_modules/fast-glob": {
|
"node_modules/fast-glob": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
|
||||||
@@ -7316,6 +7329,18 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash-es": {
|
||||||
|
"version": "4.18.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
|
||||||
|
"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/lodash.clonedeep": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/lodash.debounce": {
|
"node_modules/lodash.debounce": {
|
||||||
"version": "4.0.8",
|
"version": "4.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
@@ -7323,6 +7348,13 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash.isequal": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
|
||||||
|
"deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/lodash.merge": {
|
"node_modules/lodash.merge": {
|
||||||
"version": "4.6.2",
|
"version": "4.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||||
@@ -7832,6 +7864,12 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/parchment": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==",
|
||||||
|
"license": "BSD-3-Clause"
|
||||||
|
},
|
||||||
"node_modules/parent-module": {
|
"node_modules/parent-module": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
||||||
@@ -8035,6 +8073,35 @@
|
|||||||
],
|
],
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/quill": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/quill/-/quill-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==",
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"dependencies": {
|
||||||
|
"eventemitter3": "^5.0.1",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"parchment": "^3.0.0",
|
||||||
|
"quill-delta": "^5.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"npm": ">=8.2.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/quill-delta": {
|
||||||
|
"version": "5.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
|
||||||
|
"integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"fast-diff": "^1.3.0",
|
||||||
|
"lodash.clonedeep": "^4.5.0",
|
||||||
|
"lodash.isequal": "^4.5.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react": {
|
"node_modules/react": {
|
||||||
"version": "19.2.4",
|
"version": "19.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
|
||||||
@@ -8131,6 +8198,21 @@
|
|||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/react-quill-new": {
|
||||||
|
"version": "3.8.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-quill-new/-/react-quill-new-3.8.3.tgz",
|
||||||
|
"integrity": "sha512-c96PYqFTo0pI4R3e79B3rH9LUIce1kIQbmTBu/imJQZk8305ogyLyBqKKjG2UoInDlquXqePSzmBo2aVia3ttw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"quill": "~2.0.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"quill-delta": "^5.1.0",
|
||||||
|
"react": "^16 || ^17 || ^18 || ^19",
|
||||||
|
"react-dom": "^16 || ^17 || ^18 || ^19"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-redux": {
|
"node_modules/react-redux": {
|
||||||
"version": "9.2.0",
|
"version": "9.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||||
|
|||||||
@@ -31,6 +31,7 @@
|
|||||||
"react-dnd-html5-backend": "^16.0.1",
|
"react-dnd-html5-backend": "^16.0.1",
|
||||||
"react-dom": "^19.2.0",
|
"react-dom": "^19.2.0",
|
||||||
"react-dropzone": "^14.3.8",
|
"react-dropzone": "^14.3.8",
|
||||||
|
"react-quill-new": "^3.8.3",
|
||||||
"react-redux": "^9.2.0",
|
"react-redux": "^9.2.0",
|
||||||
"sonner": "^2.0.7",
|
"sonner": "^2.0.7",
|
||||||
"sweetalert2": "^11.26.24",
|
"sweetalert2": "^11.26.24",
|
||||||
|
|||||||
290
src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx
Normal file
290
src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx
Normal file
@@ -0,0 +1,290 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
|
||||||
|
import RichTextEditor from "@/components/form/role-upgrade/Editor";
|
||||||
|
import {
|
||||||
|
confirmUpload,
|
||||||
|
getPresignedUrl,
|
||||||
|
uploadFileToS3,
|
||||||
|
uploadMedia,
|
||||||
|
} from "@/service/mediaService";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Lightbox from "yet-another-react-lightbox";
|
||||||
|
import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
||||||
|
import Captions from "yet-another-react-lightbox/plugins/captions";
|
||||||
|
import "yet-another-react-lightbox/styles.css";
|
||||||
|
import "yet-another-react-lightbox/plugins/captions.css";
|
||||||
|
import { createHistorianCV } from "@/service/historianService";
|
||||||
|
|
||||||
|
type PendingFile = {
|
||||||
|
id: string;
|
||||||
|
file: File;
|
||||||
|
previewUrl: string;
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: "image" | "document";
|
||||||
|
extension: string;
|
||||||
|
presigned?: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RoleUpgrade() {
|
||||||
|
const [content, setContent] = useState<string>("");
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
|
||||||
|
const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
|
||||||
|
const [lightboxIndex, setLightboxIndex] = useState(-1);
|
||||||
|
|
||||||
|
const [isPreparingFiles, setIsPreparingFiles] = useState(false);
|
||||||
|
const handleContentChange = (value: string) => {
|
||||||
|
setContent(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFileChange = async (
|
||||||
|
event: React.ChangeEvent<HTMLInputElement>,
|
||||||
|
) => {
|
||||||
|
const files = event.target.files;
|
||||||
|
if (!files || files.length === 0) return;
|
||||||
|
|
||||||
|
setIsPreparingFiles(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const newFilesPromises = Array.from(files).map(async (file) => {
|
||||||
|
const isImage = file.type.startsWith("image/");
|
||||||
|
const extension = file.name.split(".").pop()?.toLowerCase() || "";
|
||||||
|
|
||||||
|
const presigned = await getPresignedUrl(file);
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: Math.random().toString(36).substring(7),
|
||||||
|
file: file,
|
||||||
|
previewUrl: isImage ? URL.createObjectURL(file) : "",
|
||||||
|
name: file.name,
|
||||||
|
size: file.size,
|
||||||
|
type: isImage ? "image" : "document",
|
||||||
|
extension: extension,
|
||||||
|
presigned: presigned,
|
||||||
|
} as PendingFile;
|
||||||
|
});
|
||||||
|
|
||||||
|
const newPendingFiles = await Promise.all(newFilesPromises);
|
||||||
|
setPendingFiles((prev) => [...prev, ...newPendingFiles]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Lỗi khi chuẩn bị file đính kèm:", error);
|
||||||
|
alert("Lỗi khi chuẩn bị kết nối upload. Vui lòng thử lại!");
|
||||||
|
} finally {
|
||||||
|
setIsPreparingFiles(false);
|
||||||
|
if (event.target) event.target.value = "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removePendingFile = (idToRemove: string, e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setPendingFiles((prev) => prev.filter((item) => item.id !== idToRemove));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
setIsSubmitting(true);
|
||||||
|
|
||||||
|
const uploadPromises = pendingFiles.map(async (item) => {
|
||||||
|
await uploadFileToS3(item.file, item.presigned);
|
||||||
|
const confirmRes = await confirmUpload(item.presigned.token_id);
|
||||||
|
return confirmRes?.data?.id || confirmRes?.id;
|
||||||
|
});
|
||||||
|
const uploadedMediaIds = await Promise.all(uploadPromises);
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
content: content,
|
||||||
|
media_ids: uploadedMediaIds,
|
||||||
|
verify_type: "ID_CARD"
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("Payload chuẩn bị gửi (JSON):", payload);
|
||||||
|
|
||||||
|
const cvResponse = await createHistorianCV(payload);
|
||||||
|
console.log("Response từ API:", cvResponse);
|
||||||
|
|
||||||
|
alert("Gửi thành công!");
|
||||||
|
setContent("");
|
||||||
|
setPendingFiles([]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Lỗi:", error);
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageFiles = pendingFiles.filter((f) => f.type === "image");
|
||||||
|
const slides = imageFiles.map((item) => ({
|
||||||
|
src: item.previewUrl,
|
||||||
|
title: item.name,
|
||||||
|
description: `Size: ${(item.size / 1024).toFixed(2)} KB`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const handleItemClick = (item: PendingFile) => {
|
||||||
|
if (item.type === "image") {
|
||||||
|
const index = imageFiles.findIndex((img) => img.id === item.id);
|
||||||
|
setLightboxIndex(index);
|
||||||
|
} else {
|
||||||
|
const fileUrl = URL.createObjectURL(item.file);
|
||||||
|
window.open(fileUrl, "_blank");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDocumentStyle = (ext: string) => {
|
||||||
|
if (["pdf"].includes(ext))
|
||||||
|
return { color: "text-red-500", bg: "bg-red-50" };
|
||||||
|
if (["doc", "docx"].includes(ext))
|
||||||
|
return { color: "text-blue-500", bg: "bg-blue-50" };
|
||||||
|
if (["xls", "xlsx"].includes(ext))
|
||||||
|
return { color: "text-emerald-500", bg: "bg-emerald-50" };
|
||||||
|
return { color: "text-gray-500", bg: "bg-gray-100" };
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<PageBreadcrumb pageTitle="Role Upgrade" />
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<RichTextEditor value={content} onChange={handleContentChange} />
|
||||||
|
|
||||||
|
<div className="p-5 bg-white border border-gray-200 rounded-2xl dark:border-gray-800 dark:bg-gray-900">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">
|
||||||
|
Tài liệu đính kèm
|
||||||
|
</h3>
|
||||||
|
<label
|
||||||
|
className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border border-dashed border-blue-500 text-blue-500 hover:bg-blue-50 transition ${isSubmitting ? "opacity-50 pointer-events-none" : ""}`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M12 4v16m8-8H4"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>Đính kèm tệp</span>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
className="hidden"
|
||||||
|
accept="image/*,.pdf,.doc,.docx"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{pendingFiles.length > 0 && (
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 gap-4 pt-4 border-t border-gray-100 dark:border-gray-800 mt-4">
|
||||||
|
{pendingFiles.map((item) => {
|
||||||
|
const docStyle = getDocumentStyle(item.extension);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => handleItemClick(item)}
|
||||||
|
className="group relative aspect-square cursor-pointer overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:border-blue-400 transition-colors"
|
||||||
|
>
|
||||||
|
{item.type === "image" ? (
|
||||||
|
<Image
|
||||||
|
src={item.previewUrl}
|
||||||
|
alt={item.name}
|
||||||
|
fill
|
||||||
|
className="object-cover group-hover:scale-110 transition-transform"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={`absolute inset-0 flex flex-col items-center justify-center p-3 ${docStyle.bg} dark:bg-gray-800`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className={`w-10 h-10 ${docStyle.color} mb-2`}
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs font-medium text-center text-gray-700 dark:text-gray-300 break-all line-clamp-2">
|
||||||
|
{item.name}
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-gray-500 mt-1 uppercase font-bold">
|
||||||
|
{item.extension}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={(e) => removePendingFile(item.id, e)}
|
||||||
|
className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity z-10 hover:bg-red-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-3 h-3"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{item.type === "image" && (
|
||||||
|
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
|
||||||
|
<svg
|
||||||
|
className="w-6 h-6 text-white"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={isSubmitting || isPreparingFiles}
|
||||||
|
className={`w-full py-4 text-white font-bold rounded-2xl shadow-lg transition-all transform flex justify-center items-center gap-2
|
||||||
|
${isSubmitting ? "bg-gray-400 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]"}`}
|
||||||
|
>
|
||||||
|
{isSubmitting ? "Đang tải dữ liệu lên..." : "Gửi yêu cầu nâng cấp"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<Lightbox
|
||||||
|
index={lightboxIndex}
|
||||||
|
open={lightboxIndex >= 0}
|
||||||
|
close={() => setLightboxIndex(-1)}
|
||||||
|
slides={slides}
|
||||||
|
plugins={[Zoom, Captions]}
|
||||||
|
zoom={{ maxZoomPixelRatio: 10 }}
|
||||||
|
styles={{
|
||||||
|
root: {
|
||||||
|
zIndex: 999999,
|
||||||
|
"--yarl__color_backdrop": "rgba(0, 0, 0, 0.9)",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,212 @@
|
|||||||
|
"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 Swal from "sweetalert2";
|
||||||
|
|
||||||
|
import ApplicationTable, {
|
||||||
|
AppSortColumn,
|
||||||
|
} from "@/components/tables/ApplicationTable";
|
||||||
|
import { apiGetUserApplications } from "@/service/historianService";
|
||||||
|
import {
|
||||||
|
ApplicationDto,
|
||||||
|
ApplicationResponse,
|
||||||
|
GetApplicationsParams,
|
||||||
|
} from "@/interface/historian";
|
||||||
|
import ApplicationDetailModal from "@/components/tables/ApplicationDetailModal";
|
||||||
|
|
||||||
|
export default function HistorianApplicationPage() {
|
||||||
|
const [page, setPage] = useState<number>(1);
|
||||||
|
const [limitInput, setLimitInput] = useState<string>("3");
|
||||||
|
|
||||||
|
const [searchTerm, setSearchTerm] = useState<string>("");
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>("");
|
||||||
|
const [verifyTypeFilter, setVerifyTypeFilter] = useState<string>("");
|
||||||
|
|
||||||
|
const [selectedApp, setSelectedApp] = useState<ApplicationDto | null>(null);
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
|
||||||
|
const [debouncedParams, setDebouncedParams] = useState({
|
||||||
|
search: "",
|
||||||
|
limit: 3,
|
||||||
|
status: "",
|
||||||
|
verifyType: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const [tableData, setTableData] = useState<ApplicationResponse | null>(null);
|
||||||
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
|
||||||
|
const [sortBy, setSortBy] = useState<AppSortColumn>("created_at");
|
||||||
|
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = setTimeout(() => {
|
||||||
|
setDebouncedParams({
|
||||||
|
search: searchTerm,
|
||||||
|
limit: parseInt(limitInput) || 3,
|
||||||
|
status: statusFilter,
|
||||||
|
verifyType: verifyTypeFilter,
|
||||||
|
});
|
||||||
|
setPage(1);
|
||||||
|
}, 600);
|
||||||
|
return () => clearTimeout(handler);
|
||||||
|
}, [searchTerm, limitInput, statusFilter, verifyTypeFilter]);
|
||||||
|
|
||||||
|
const fetchApplications = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const payload: GetApplicationsParams = {
|
||||||
|
page: page,
|
||||||
|
limit: debouncedParams.limit,
|
||||||
|
search: debouncedParams.search || undefined,
|
||||||
|
sort: sortBy,
|
||||||
|
order: sortOrder,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Backend yêu cầu mảng cho các filter này
|
||||||
|
if (debouncedParams.status) payload.statuses = [debouncedParams.status];
|
||||||
|
if (debouncedParams.verifyType)
|
||||||
|
payload.verify_types = [debouncedParams.verifyType];
|
||||||
|
|
||||||
|
const response = await apiGetUserApplications(payload);
|
||||||
|
if (response?.status) {
|
||||||
|
setTableData(response);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Lỗi lấy danh sách hồ sơ:", err);
|
||||||
|
setTableData(null);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [page, debouncedParams, sortBy, sortOrder]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchApplications();
|
||||||
|
}, [fetchApplications]);
|
||||||
|
|
||||||
|
const handleSort = (column: AppSortColumn) => {
|
||||||
|
setPage(1);
|
||||||
|
if (sortBy === column) {
|
||||||
|
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
|
||||||
|
} else {
|
||||||
|
setSortBy(column);
|
||||||
|
setSortOrder("desc");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewDetail = (app: ApplicationDto) => {
|
||||||
|
setSelectedApp(app);
|
||||||
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const pagination = tableData?.pagination;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageBreadcrumb pageTitle="Quản lý hồ sơ Sử gia" />
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<ComponentCard title="Bộ lọc tìm kiếm">
|
||||||
|
<div className="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<div>
|
||||||
|
<label className="block mb-2 text-sm font-medium">Tìm kiếm</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="ID, nội dung..."
|
||||||
|
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 xác minh
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={verifyTypeFilter}
|
||||||
|
onChange={(e) => setVerifyTypeFilter(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="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>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block mb-2 text-sm font-medium">
|
||||||
|
Trạng thái
|
||||||
|
</label>
|
||||||
|
<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ả</option>
|
||||||
|
<option value="1">Đang chờ duyệt</option>
|
||||||
|
<option value="2">Đã duyệt</option>
|
||||||
|
<option value="3">Từ chối</option>
|
||||||
|
</select>
|
||||||
|
</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 hồ sơ">
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ApplicationTable
|
||||||
|
data={tableData?.data || []}
|
||||||
|
onSort={handleSort}
|
||||||
|
sortBy={sortBy}
|
||||||
|
sortOrder={sortOrder}
|
||||||
|
onViewDetail={handleViewDetail}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between mt-6">
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Hiển thị {pagination?.total_records || 0} hồ sơ
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{pagination && pagination.total_pages > 1 && (
|
||||||
|
<Pagination
|
||||||
|
currentPage={pagination.current_page}
|
||||||
|
totalPages={pagination.total_pages}
|
||||||
|
onPageChange={(newPage) => setPage(newPage)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ComponentCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ApplicationDetailModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
onClose={() => setIsModalOpen(false)}
|
||||||
|
application={selectedApp || null}
|
||||||
|
onRefresh={fetchApplications} // Tải lại bảng sau khi Admin duyệt
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -31,6 +31,7 @@ export default function Profile() {
|
|||||||
};
|
};
|
||||||
fetchUser();
|
fetchUser();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
|
<div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
|
||||||
|
|||||||
@@ -768,4 +768,44 @@ html {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, .5);
|
||||||
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
|
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor pre.ql-syntax {
|
||||||
|
background-color: #23241f;
|
||||||
|
color: #f8f8f2;
|
||||||
|
overflow: visible;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-toolbar.ql-snow {
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid #e5e7eb !important;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
padding: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-container.ql-snow {
|
||||||
|
border: none !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor {
|
||||||
|
min-height: 400px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ql-toolbar.ql-snow {
|
||||||
|
background-color: #1f2937;
|
||||||
|
border-bottom: 1px solid #374151 !important;
|
||||||
|
color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ql-snow .ql-stroke {
|
||||||
|
stroke: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ql-editor {
|
||||||
|
color: #f3f4f6;
|
||||||
}
|
}
|
||||||
98
src/components/form/role-upgrade/Editor.tsx
Normal file
98
src/components/form/role-upgrade/Editor.tsx
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef } from "react";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
import "react-quill-new/dist/quill.snow.css";
|
||||||
|
|
||||||
|
const ReactQuillEditor = dynamic(
|
||||||
|
async () => {
|
||||||
|
const { default: RQ } = await import("react-quill-new");
|
||||||
|
return ({ forwardedRef, ...props }: any) => (
|
||||||
|
<RQ ref={forwardedRef} {...props} />
|
||||||
|
);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ssr: false,
|
||||||
|
loading: () => (
|
||||||
|
<div className="h-[480px] w-full animate-pulse bg-gray-100 rounded-lg" />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
interface EditorProps {
|
||||||
|
value: string;
|
||||||
|
onChange: (content: string) => void;
|
||||||
|
handleImageUpload?: (file: File) => Promise<string>;
|
||||||
|
onEditorReady?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RichTextEditor = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
handleImageUpload,
|
||||||
|
onEditorReady,
|
||||||
|
}: EditorProps) => {
|
||||||
|
const quillRef = useRef<any>(null);
|
||||||
|
|
||||||
|
const modules = {
|
||||||
|
toolbar: [
|
||||||
|
[{ font: [] }, { size: [] }],
|
||||||
|
["bold", "italic", "underline", "strike"],
|
||||||
|
[{ color: [] }, { background: [] }],
|
||||||
|
[{ script: "sub" }, { script: "super" }],
|
||||||
|
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||||
|
["blockquote", "code-block"],
|
||||||
|
[
|
||||||
|
{ list: "ordered" },
|
||||||
|
{ list: "bullet" },
|
||||||
|
{ indent: "-1" },
|
||||||
|
{ indent: "+1" },
|
||||||
|
],
|
||||||
|
[{ direction: "rtl" }, { align: [] }],
|
||||||
|
["link", "image", "video", "formula"],
|
||||||
|
["clean"],
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (quillRef.current && handleImageUpload) {
|
||||||
|
const quill = quillRef.current.getEditor();
|
||||||
|
const toolbar = quill.getModule("toolbar");
|
||||||
|
toolbar.addHandler("image", () => {
|
||||||
|
const input = document.createElement("input");
|
||||||
|
input.setAttribute("type", "file");
|
||||||
|
input.setAttribute("accept", "image/*");
|
||||||
|
input.click();
|
||||||
|
input.onchange = async () => {
|
||||||
|
const file = input.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
try {
|
||||||
|
const url = await handleImageUpload(file);
|
||||||
|
const range = quill.getSelection();
|
||||||
|
quill.insertEmbed(range?.index || 0, "image", url);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Upload failed", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onEditorReady?.();
|
||||||
|
}, [handleImageUpload]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="editor-container bg-white dark:bg-gray-900 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800">
|
||||||
|
<ReactQuillEditor
|
||||||
|
forwardedRef={quillRef}
|
||||||
|
theme="snow"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
modules={modules}
|
||||||
|
className="min-h-[300px]"
|
||||||
|
placeholder="Nhập nội dung tại đây..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RichTextEditor;
|
||||||
321
src/components/tables/ApplicationDetailModal.tsx
Normal file
321
src/components/tables/ApplicationDetailModal.tsx
Normal file
@@ -0,0 +1,321 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import { ApplicationDto } from "@/interface/historian";
|
||||||
|
import {
|
||||||
|
apiGetUserById,
|
||||||
|
apiUpdateApplicationStatus,
|
||||||
|
} from "@/service/adminService";
|
||||||
|
import { getMediaById } from "@/service/mediaService";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
application: ApplicationDto | null;
|
||||||
|
onRefresh: () => void; // Gọi lại hàm fetch danh sách sau khi duyệt xong
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ApplicationDetailModal({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
application,
|
||||||
|
onRefresh,
|
||||||
|
}: Props) {
|
||||||
|
const [userData, setUserData] = useState<any>(null);
|
||||||
|
const [mediaList, setMediaList] = useState<any[]>([]);
|
||||||
|
const [reviewNote, setReviewNote] = useState("");
|
||||||
|
const [loadingContent, setLoadingContent] = useState(false);
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && application) {
|
||||||
|
setReviewNote(application.review_note || "");
|
||||||
|
fetchDetails();
|
||||||
|
} else {
|
||||||
|
setUserData(null);
|
||||||
|
setMediaList([]);
|
||||||
|
setReviewNote("");
|
||||||
|
}
|
||||||
|
}, [isOpen, application]);
|
||||||
|
|
||||||
|
const fetchDetails = async () => {
|
||||||
|
if (!application) return;
|
||||||
|
setLoadingContent(true);
|
||||||
|
try {
|
||||||
|
const userRes = await apiGetUserById(application.user_id);
|
||||||
|
|
||||||
|
console.log("User data:", userRes);
|
||||||
|
|
||||||
|
if (userRes?.data) setUserData(userRes.data);
|
||||||
|
|
||||||
|
if (application.media && application.media.length > 0) {
|
||||||
|
const mediaPromises = application.media.map((m: any) =>
|
||||||
|
getMediaById(m.id),
|
||||||
|
);
|
||||||
|
const mediaResponses = await Promise.all(mediaPromises);
|
||||||
|
|
||||||
|
setMediaList(mediaResponses.map((res) => res?.data || res));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Lỗi khi tải chi tiết:", error);
|
||||||
|
} finally {
|
||||||
|
setLoadingContent(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateStatus = async (status: "APPROVED" | "REJECTED") => {
|
||||||
|
if (!application) return;
|
||||||
|
|
||||||
|
if (status === "REJECTED" && !reviewNote.trim()) {
|
||||||
|
Swal.fire(
|
||||||
|
"Cảnh báo",
|
||||||
|
"Vui lòng nhập lý do từ chối vào ô Ghi chú!",
|
||||||
|
"warning",
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsSubmitting(true);
|
||||||
|
const payload = {
|
||||||
|
status: status,
|
||||||
|
review_note: reviewNote,
|
||||||
|
};
|
||||||
|
|
||||||
|
await apiUpdateApplicationStatus(application.id, payload);
|
||||||
|
|
||||||
|
Swal.fire(
|
||||||
|
"Thành công!",
|
||||||
|
`Hồ sơ đã được ${status === "APPROVED" ? "Phê duyệt" : "Từ chối"}.`,
|
||||||
|
"success",
|
||||||
|
);
|
||||||
|
onRefresh();
|
||||||
|
onClose();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Lỗi cập nhật trạng thái:", error);
|
||||||
|
Swal.fire("Lỗi", "Không thể cập nhật trạng thái lúc này.", "error");
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen || !application) return null;
|
||||||
|
|
||||||
|
const handleOpenFile = (media: any) => {
|
||||||
|
if (!media.url) {
|
||||||
|
Swal.fire("Lỗi", "Không tìm thấy đường dẫn file", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isImage = media.url.match(/\.(jpeg|jpg|gif|png)$/i);
|
||||||
|
const isPdf = media.url.match(/\.(pdf)$/i);
|
||||||
|
|
||||||
|
if (isImage || isPdf) {
|
||||||
|
window.open(media.url, "_blank");
|
||||||
|
} else {
|
||||||
|
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = media.url;
|
||||||
|
link.download = media.original_name || "download";
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-[9999] 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 shadow-xl dark:bg-gray-900 flex flex-col overflow-hidden">
|
||||||
|
{/* HEADER */}
|
||||||
|
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-800 dark:text-white">
|
||||||
|
Chi tiết yêu cầu nâng cấp
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-2 text-gray-500 transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* BODY */}
|
||||||
|
<div className="flex-1 p-6 overflow-y-auto custom-scrollbar">
|
||||||
|
{loadingContent ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-40 gap-3 text-gray-500">
|
||||||
|
<div className="w-8 h-8 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
|
||||||
|
<p>Đang tải dữ liệu người dùng và file đính kèm...</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-8">
|
||||||
|
<div className="p-5 border border-gray-200 rounded-xl dark:border-gray-800 bg-gray-50/50 dark:bg-white/[0.02]">
|
||||||
|
<h4 className="mb-4 text-sm font-bold text-gray-500 uppercase">
|
||||||
|
Thông tin ứng viên
|
||||||
|
</h4>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="relative w-16 h-16 overflow-hidden border border-gray-200 rounded-full shrink-0 dark:border-gray-700">
|
||||||
|
<Image
|
||||||
|
width={64}
|
||||||
|
height={64}
|
||||||
|
src={
|
||||||
|
userData?.profile?.avatar_url || "/images/no-images.jpg"
|
||||||
|
}
|
||||||
|
alt="avatar"
|
||||||
|
className="object-cover w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-semibold text-gray-800 dark:text-white">
|
||||||
|
{userData?.profile?.display_name || application.user_id}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
Email: {userData?.email || "Đang cập nhật..."}
|
||||||
|
</p>
|
||||||
|
<div className="mt-1">
|
||||||
|
<span className="px-2 py-0.5 text-[10px] font-medium tracking-wide text-blue-600 bg-blue-100 rounded-full dark:bg-blue-500/20 dark:text-blue-400">
|
||||||
|
{application.verify_type === 1
|
||||||
|
? "CĂN CƯỚC CÔNG DÂN"
|
||||||
|
: "BẰNG CẤP / KHÁC"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-3 text-sm font-bold text-gray-500 uppercase">
|
||||||
|
Nội dung ứng tuyển
|
||||||
|
</h4>
|
||||||
|
<div
|
||||||
|
className="p-4 prose text-gray-800 bg-white border border-gray-200 min-h-[100px] rounded-xl dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200 max-w-none"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html:
|
||||||
|
application.content ||
|
||||||
|
"<p className='text-gray-400 italic'>Không có nội dung chữ.</p>",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-3 text-sm font-bold text-gray-500 uppercase">
|
||||||
|
Tệp đính kèm ({mediaList.length})
|
||||||
|
</h4>
|
||||||
|
{mediaList.length > 0 ? (
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
|
||||||
|
{mediaList.map((media, idx) => {
|
||||||
|
const isImage =
|
||||||
|
media.url?.match(/\.(jpeg|jpg|gif|png)$/i) ||
|
||||||
|
media.mime_type?.startsWith("image/");
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="relative overflow-hidden border border-gray-200 group aspect-square rounded-xl dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
{isImage ? (
|
||||||
|
<Image
|
||||||
|
src={media.url || "/images/no-images.jpg"}
|
||||||
|
alt="media"
|
||||||
|
fill
|
||||||
|
className="object-cover transition-transform duration-300 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center w-full h-full p-3 text-center">
|
||||||
|
<svg
|
||||||
|
className="w-10 h-10 mb-2 text-blue-500"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs font-medium text-gray-600 line-clamp-2 dark:text-gray-300">
|
||||||
|
{media.original_name || "Tài liệu"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handleOpenFile(media)}
|
||||||
|
className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/50 opacity-0 group-hover:opacity-100"
|
||||||
|
>
|
||||||
|
<span className="px-3 py-1 text-sm font-medium text-white bg-blue-600 rounded-lg">
|
||||||
|
{media.url.match(/\.(jpeg|jpg|gif|png)$/i)
|
||||||
|
? "Xem ảnh"
|
||||||
|
: "Tải tài liệu"}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm italic text-gray-500">
|
||||||
|
Không có tệp đính kèm nào.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* KHỐI 4: GHI CHÚ ADMIN */}
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-3 text-sm font-bold text-gray-500 uppercase">
|
||||||
|
Ghi chú duyệt hồ sơ
|
||||||
|
</h4>
|
||||||
|
<textarea
|
||||||
|
className="w-full p-4 text-sm bg-white border border-gray-200 rounded-xl dark:border-gray-800 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 outline-none resize-none h-[100px]"
|
||||||
|
placeholder="Nhập lý do từ chối (bắt buộc) hoặc ghi chú phê duyệt..."
|
||||||
|
value={reviewNote}
|
||||||
|
onChange={(e) => setReviewNote(e.target.value)}
|
||||||
|
disabled={
|
||||||
|
application.status !== 1 && application.status !== "PENDING"
|
||||||
|
} // Disable nếu đã duyệt
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FOOTER ACTIONS */}
|
||||||
|
<div className="flex items-center justify-end gap-3 px-6 py-4 bg-gray-50 border-t border-gray-200 dark:bg-gray-900/50 dark:border-gray-800">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
Đóng
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Chỉ hiện nút duyệt/từ chối nếu status đang là PENDING (1) */}
|
||||||
|
{(application.status === 1 || application.status === "PENDING") && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdateStatus("REJECTED")}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="px-5 py-2.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded-xl hover:bg-red-700 disabled:opacity-50 transition-colors"
|
||||||
|
>
|
||||||
|
Từ chối
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdateStatus("APPROVED")}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="px-5 py-2.5 text-sm font-medium text-white bg-green-600 border border-transparent rounded-xl hover:bg-green-700 disabled:opacity-50 transition-colors shadow-lg shadow-green-500/30"
|
||||||
|
>
|
||||||
|
Phê duyệt
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
211
src/components/tables/ApplicationTable.tsx
Normal file
211
src/components/tables/ApplicationTable.tsx
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "../ui/table";
|
||||||
|
import Badge from "../ui/badge/Badge";
|
||||||
|
import { ApplicationDto } from "@/interface/historian";
|
||||||
|
|
||||||
|
export type AppSortColumn =
|
||||||
|
| "created_at"
|
||||||
|
| "status"
|
||||||
|
| "verify_type"
|
||||||
|
| "reviewed_at"
|
||||||
|
| "reviewed_by"
|
||||||
|
| "updated_at";
|
||||||
|
|
||||||
|
interface ApplicationTableProps {
|
||||||
|
data: ApplicationDto[];
|
||||||
|
onSort: (column: AppSortColumn) => void;
|
||||||
|
onViewDetail: (app: ApplicationDto) => void;
|
||||||
|
sortBy?: AppSortColumn;
|
||||||
|
sortOrder?: "asc" | "desc";
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ApplicationTable({
|
||||||
|
data,
|
||||||
|
onSort,
|
||||||
|
onViewDetail,
|
||||||
|
sortBy,
|
||||||
|
sortOrder,
|
||||||
|
}: ApplicationTableProps) {
|
||||||
|
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 SortIcon = ({ column }: { column: AppSortColumn }) => {
|
||||||
|
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 getStatusBadge = (status: string | number) => {
|
||||||
|
const s = status?.toString();
|
||||||
|
switch (s) {
|
||||||
|
case "1":
|
||||||
|
case "PENDING":
|
||||||
|
return <Badge size="sm" variant="light" color="warning">Đang chờ</Badge>;
|
||||||
|
case "2":
|
||||||
|
case "APPROVED":
|
||||||
|
return <Badge size="sm" variant="light" color="success">Đã duyệt</Badge>;
|
||||||
|
case "3":
|
||||||
|
case "REJECTED":
|
||||||
|
return <Badge size="sm" variant="light" color="error">Từ chối</Badge>;
|
||||||
|
default:
|
||||||
|
return <Badge size="sm" variant="light" color="light">{status || "N/A"}</Badge>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderVerifyTypes = (verifyType: string | string[] | number | number[]) => {
|
||||||
|
const typeMap: Record<string, string> = {
|
||||||
|
"1": "Thẻ nhận dạng nhà nghiên cứu",
|
||||||
|
"ID_CARD": "Thẻ nhận dạng nhà nghiên cứu",
|
||||||
|
"2": "Bằng cấp",
|
||||||
|
"EDUCATION": "Bằng cấp",
|
||||||
|
"3": "Chuyên gia",
|
||||||
|
"EXPERT": "Chuyên gia",
|
||||||
|
"4": "Khác",
|
||||||
|
"OTHER": "Khác",
|
||||||
|
};
|
||||||
|
|
||||||
|
const typesArray = Array.isArray(verifyType) ? verifyType : [verifyType];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{typesArray.map((type, index) => {
|
||||||
|
const t = type?.toString();
|
||||||
|
if (!t) return null;
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="px-2 py-0.5 rounded-md bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 text-[11px] font-medium whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{typeMap[t] || t}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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-[1300px]">
|
||||||
|
<Table>
|
||||||
|
<TableHeader className="border-b border-gray-100 dark:border-white/[0.05]">
|
||||||
|
<TableRow>
|
||||||
|
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
|
||||||
|
Người dùng (ID)
|
||||||
|
</TableCell>
|
||||||
|
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400 min-w-[220px]">
|
||||||
|
Loại xác minh
|
||||||
|
</TableCell>
|
||||||
|
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
|
||||||
|
Đính kèm
|
||||||
|
</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("status")}>
|
||||||
|
Trạng thái <SortIcon column="status" />
|
||||||
|
</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 nộp <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("reviewed_at")}>
|
||||||
|
Cập nhật <SortIcon column="reviewed_at" />
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
|
||||||
|
Cập nhật bởi
|
||||||
|
</TableCell>
|
||||||
|
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400 max-w-[200px]">
|
||||||
|
Ghi chú
|
||||||
|
</TableCell>
|
||||||
|
<TableCell isHeader className="px-5 py-3 font-medium text-center text-gray-500 text-theme-xs dark:text-gray-400">
|
||||||
|
Thao tác
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
|
||||||
|
<TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
|
||||||
|
{data.length > 0 ? (
|
||||||
|
data.map((app) => (
|
||||||
|
<TableRow key={app.id} className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors">
|
||||||
|
<TableCell className="px-5 py-4 text-start font-mono text-theme-xs">
|
||||||
|
{app.user_id.slice(0, 8)}...
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="px-5 py-4 text-start">
|
||||||
|
{renderVerifyTypes(app.verify_type)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="px-5 py-4 text-center text-theme-sm">
|
||||||
|
<span className="font-bold text-gray-800 dark:text-white mr-1">{app.media?.length || 0}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="px-5 py-4 text-start">
|
||||||
|
{getStatusBadge(app.status)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
|
||||||
|
{formatDate(app.created_at)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
|
||||||
|
{formatDate(app.reviewed_at)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
|
||||||
|
{app.reviewed_by || "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="px-5 py-4 text-start text-theme-xs text-gray-500 dark:text-gray-400 truncate max-w-[200px]">
|
||||||
|
{app.review_note || "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="px-5 py-4 text-center">
|
||||||
|
<button
|
||||||
|
onClick={() => onViewDetail(app)}
|
||||||
|
className="text-brand-500 hover:text-brand-600 font-medium text-theme-sm"
|
||||||
|
>
|
||||||
|
Chi tiết
|
||||||
|
</button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={9} className="px-5 py-20 text-center text-gray-500 italic">
|
||||||
|
Không tìm thấy dữ liệu hồ sơ
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
51
src/interface/historian.ts
Normal file
51
src/interface/historian.ts
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
export interface MediaDto {
|
||||||
|
id: string;
|
||||||
|
storage_key: string;
|
||||||
|
original_name: string;
|
||||||
|
mime_type: string;
|
||||||
|
size: number;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApplicationDto {
|
||||||
|
id: string;
|
||||||
|
user_id: string;
|
||||||
|
// Sửa từ number thành string | number
|
||||||
|
verify_type: string | number | string[] | number[];
|
||||||
|
content: string;
|
||||||
|
is_deleted: boolean;
|
||||||
|
// Sửa status để nhận cả 1,2,3 hoặc PENDING, APPROVED...
|
||||||
|
status: string | number;
|
||||||
|
reviewed_by: string;
|
||||||
|
review_note: string;
|
||||||
|
reviewed_at: string | null;
|
||||||
|
created_at: string;
|
||||||
|
updated_at?: string;
|
||||||
|
media: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export interface GetApplicationsParams {
|
||||||
|
page?: number;
|
||||||
|
limit?: number;
|
||||||
|
search?: string;
|
||||||
|
sort?: string;
|
||||||
|
order?: "asc" | "desc";
|
||||||
|
statuses?: string[];
|
||||||
|
verify_types?: string[];
|
||||||
|
created_from?: string;
|
||||||
|
created_to?: string;
|
||||||
|
reviewed_by?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApplicationResponse {
|
||||||
|
status: boolean;
|
||||||
|
message: string;
|
||||||
|
data: ApplicationDto[];
|
||||||
|
pagination: {
|
||||||
|
current_page: number;
|
||||||
|
page_size: number;
|
||||||
|
total_records: number;
|
||||||
|
total_pages: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -46,7 +46,7 @@ const navItems: NavItem[] = [
|
|||||||
{
|
{
|
||||||
name: "Forms",
|
name: "Forms",
|
||||||
icon: <ListIcon />,
|
icon: <ListIcon />,
|
||||||
subItems: [{ name: "Form Elements", path: "/form-elements", pro: false }],
|
subItems: [{ name: "Form Elements", path: "/form-elements", pro: false }, { name: "Role Upgrade", path: "/role-upgrade", pro: false }],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Tables",
|
name: "Tables",
|
||||||
@@ -54,6 +54,7 @@ const navItems: NavItem[] = [
|
|||||||
subItems: [
|
subItems: [
|
||||||
{ name: "Basic Tables", path: "/basic-tables", pro: false },
|
{ name: "Basic Tables", path: "/basic-tables", pro: false },
|
||||||
{ name: "User Tables", path: "/user-table", pro: false },
|
{ name: "User Tables", path: "/user-table", pro: false },
|
||||||
|
{ name: "Applications Tables", path: "/applications-tables", pro: false },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ export const apiGetListUser = async (payload: getUserDto) => {
|
|||||||
|
|
||||||
export const apiChangeRole = async (id: string, payload: any) => {
|
export const apiChangeRole = async (id: string, payload: any) => {
|
||||||
const response = await api.patch(API.Admin.CHANGE_ROLE(id), payload);
|
const response = await api.patch(API.Admin.CHANGE_ROLE(id), payload);
|
||||||
// console.log("Response từ API sau khi đổi role:", response);
|
|
||||||
return response?.data;
|
return response?.data;
|
||||||
};
|
};
|
||||||
export const apiDeleteUser = async (id: string) => {
|
export const apiDeleteUser = async (id: string) => {
|
||||||
@@ -32,3 +31,14 @@ export const apiGetUserMedia = async (id: string) => {
|
|||||||
const response = await api.get(API.Admin.GET_USER_MEDIA(id));
|
const response = await api.get(API.Admin.GET_USER_MEDIA(id));
|
||||||
return response?.data;
|
return response?.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const apiUpdateApplicationStatus = async (id: string, payload: any) => {
|
||||||
|
const response = await api.patch(API.Admin.UPDATE_APPLICATION_STATUS(id), payload);
|
||||||
|
return response?.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const apiGetUserById = async (userId: string) => {
|
||||||
|
// Thay đổi URL sao cho khớp với route Backend của bạn
|
||||||
|
const response = await api.get(API.Admin.GET_USER_BY_ID(userId));
|
||||||
|
return response?.data;
|
||||||
|
};
|
||||||
13
src/service/historianService.ts
Normal file
13
src/service/historianService.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import api from "@/config/config";
|
||||||
|
import { API } from "../../api";
|
||||||
|
|
||||||
|
export const createHistorianCV = async (payload: any) => {
|
||||||
|
const response = await api.post(API.Historian.CREATE_CV, payload);
|
||||||
|
return response?.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const apiGetUserApplications = async (payload :any) => {
|
||||||
|
const response = await api.get(API.Historian.APPLICATION, { params: payload });
|
||||||
|
// console.log("API Response:", response.data);
|
||||||
|
return response?.data;
|
||||||
|
};
|
||||||
@@ -88,3 +88,23 @@ export const uploadMedia = async (file: File) => {
|
|||||||
// console.log("Media sau khi upload:", media);
|
// console.log("Media sau khi upload:", media);
|
||||||
return media;
|
return media;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getPresignedUrl = async (file: File) => {
|
||||||
|
const { data: presigned } = await api.get<PreSignedResponse>(
|
||||||
|
"/media/presigned",
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
fileName: file.name,
|
||||||
|
contentType: file.type,
|
||||||
|
size: file.size,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
return presigned;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getMediaById = async (mediaId: number | string) => {
|
||||||
|
const response = await api.get(API.Media.GET_MEDIA_BY_ID(mediaId));
|
||||||
|
return response?.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,6 +7,11 @@ export const apiGetCurrentUserMedia = async () => {
|
|||||||
return response?.data;
|
return response?.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const apiGetCurrentUserApplications = async () => {
|
||||||
|
const response = await api.get(API.User.APPLICATION);
|
||||||
|
return response?.data;
|
||||||
|
};
|
||||||
|
|
||||||
export const apiUpdateUser = async (id: number | string, payload: Profile) => {
|
export const apiUpdateUser = async (id: number | string, payload: Profile) => {
|
||||||
const response = await api.put(API.User.Update(id), payload);
|
const response = await api.put(API.User.Update(id), payload);
|
||||||
return response?.data;
|
return response?.data;
|
||||||
|
|||||||
Reference in New Issue
Block a user