Generate Certificates: Adding QR with UUID of certificates to verify
This commit is contained in:
Kemas M. Aryadary Rasyad
+10
-1
@@ -75,6 +75,15 @@ const Navbar = () => {
|
||||
>
|
||||
Internship
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/login-internify");
|
||||
}}
|
||||
className="block w-full text-left hover:text-red-600 transition"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -114,7 +123,7 @@ const Navbar = () => {
|
||||
onClick={() => {
|
||||
navigate("/login-internify");
|
||||
}}
|
||||
className="block w-full text-left hover:text-blue-600 transition"
|
||||
className="block w-full text-left hover:text-red-600 transition"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useCertificateVerification } from "../../hooks/useCertificates";
|
||||
|
||||
export default function VerificationCert() {
|
||||
const { uuid } = useParams<{ uuid: string }>();
|
||||
const { verification, loading, error } = useCertificateVerification(uuid ?? "");
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container flex items-center justify-center min-h-screen">
|
||||
<p className="text-gray-500 animate-pulse">Memverifikasi sertifikat...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !verification) {
|
||||
return (
|
||||
<div className="container flex flex-col items-center justify-center min-h-screen text-center px-4">
|
||||
<h1 className="text-2xl font-bold text-red-600 mb-2">Sertifikat Tidak Valid</h1>
|
||||
<p className="text-gray-500">
|
||||
Sertifikat dengan UUID ini tidak dapat ditemukan atau sudah tidak berlaku.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container flex items-center justify-center min-h-screen px-4">
|
||||
<div className="bg-white shadow-md rounded-lg p-8 max-w-md w-full">
|
||||
<h1 className="text-2xl font-bold text-green-600 mb-6 text-center">
|
||||
Sertifikat Valid
|
||||
</h1>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">Nama Intern</span>
|
||||
<p className="font-semibold">{verification.intern_name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Proyek</span>
|
||||
<p className="font-semibold">{verification.project_name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Tanggal Terbit</span>
|
||||
<p className="font-semibold">
|
||||
{new Date(verification.created_at).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">UUID</span>
|
||||
<p className="font-mono text-xs break-all">{verification.uuid}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,6 @@ import SertificateHistory from "./components/CertificateHistory";
|
||||
|
||||
// import { useClaimCertificate } from "../../../hooks/useCertificates";
|
||||
import { useProjectDetail } from "../../../hooks/useProjects";
|
||||
|
||||
import { useMyCertificates } from "../../../hooks/useCertificates";
|
||||
import type { Project } from "../../../types/project.types";
|
||||
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { useState } from "react";
|
||||
import { FileText, FileUp, Link } from "lucide-react";
|
||||
import { resolveImageUrl } from "../../../utils/SertificateGenerator";
|
||||
|
||||
interface SubmitStatusTableProps {
|
||||
type: "file" | "link";
|
||||
filePath?: string | null; // ganti dari files: File[]
|
||||
filePath?: string | null;
|
||||
link?: string;
|
||||
submittedAt?: Date;
|
||||
deadline?: Date;
|
||||
@@ -66,7 +67,7 @@ export default function SubmitStatusTable({
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setConfirmDelete(false)}
|
||||
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-card border border-card-outline text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -106,7 +107,7 @@ export default function SubmitStatusTable({
|
||||
key={row.label}
|
||||
className="grid grid-cols-[180px_1fr] border-b border-box-border"
|
||||
>
|
||||
<div className="px-4 py-3 text-sm text-gray-500 border-r border-box-border">
|
||||
<div className="px-4 py-3 text-sm text-font border-r border-box-border">
|
||||
{row.label}
|
||||
</div>
|
||||
<div className="px-4 py-3 text-sm text-gray-800">{row.value}</div>
|
||||
@@ -115,15 +116,20 @@ export default function SubmitStatusTable({
|
||||
|
||||
{/* File / Link row */}
|
||||
<div className="grid grid-cols-[180px_1fr]">
|
||||
<div className="px-4 py-3 text-sm text-gray-500 border-r border-box-border">
|
||||
<div className="px-4 py-3 text-sm text-font border-r border-box-border">
|
||||
{type === "file" ? "File submission" : "Link submission"}
|
||||
</div>
|
||||
<div className="px-4 py-3 flex flex-col gap-2">
|
||||
{type === "file" ? (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-800">
|
||||
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
|
||||
{filePath ? filePath.split("/").pop() : "File submitted"}
|
||||
</div>
|
||||
<a
|
||||
href={resolveImageUrl(filePath ?? "")}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
<FileText className="w-4 h-4 stroke-[2.5]" />
|
||||
<span>{resolveImageUrl(filePath ?? "").split("/").pop()}</span>
|
||||
</a>
|
||||
) : (
|
||||
<a href={link} target="_blank" rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 text-sm text-blue-600 hover:underline break-all">
|
||||
|
||||
@@ -65,7 +65,12 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
|
||||
if (ok) { setFiles([]); setIsEditing(false); }
|
||||
};
|
||||
|
||||
// Sudah ada submission dan tidak sedang edit -> tampilkan status
|
||||
// Batal edit — kembali ke tampilan status tanpa kehilangan submission lama
|
||||
const handleCancelEdit = () => {
|
||||
setFiles([]);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
if (submission && !isEditing) {
|
||||
return (
|
||||
<SubmitStatusTable
|
||||
@@ -79,6 +84,8 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
|
||||
);
|
||||
}
|
||||
|
||||
const currentFileName = submission?.file_path?.split("/").pop();
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<input
|
||||
@@ -97,6 +104,7 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
|
||||
}`}
|
||||
>
|
||||
{files.length > 0 ? (
|
||||
// File baru sudah dipilih — tampilkan itu (menggantikan file lama)
|
||||
<div className="space-y-2">
|
||||
{files.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between text-sm font-medium text-gray-800" onClick={(e) => e.stopPropagation()}>
|
||||
@@ -110,6 +118,17 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : isEditing && currentFileName ? (
|
||||
// Mode edit, belum pilih file baru — tampilkan file submission lama sebagai referensi
|
||||
<div className="flex flex-col items-center justify-center h-full space-y-2 text-center py-6">
|
||||
<FileText className="w-6 h-6 text-gray-400" />
|
||||
<p className="text-sm font-semibold text-gray-700">
|
||||
File saat ini: <span className="text-red-700">{currentFileName}</span>
|
||||
</p>
|
||||
<p className="text-[11px] text-gray-400 font-medium pointer-events-none">
|
||||
Klik atau drag & drop untuk mengganti file
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full space-y-2 pointer-events-none text-center py-6">
|
||||
<UploadCloud className="w-8 h-8 text-gray-400 mx-auto stroke-[1.5]" />
|
||||
@@ -118,13 +137,25 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="submit" disabled={loading}
|
||||
className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
|
||||
>
|
||||
{loading ? "Mengirim..." : isEditing ? "Update Submission" : "Save Changes"}
|
||||
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
|
||||
</button>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{isEditing && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancelEdit}
|
||||
className="w-full bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-bold py-3 rounded-xl transition-colors"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="submit" disabled={loading}
|
||||
className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
|
||||
>
|
||||
{loading ? "Mengirim..." : isEditing ? "Update Submission" : "Save Changes"}
|
||||
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
import type { InternSubmissionProgress } from "../../../../hooks/useInternProgress";
|
||||
import { useProjectDetail } from "../../../../hooks/useProjects";
|
||||
import JSZip from "jszip";
|
||||
import { generateCertificate } from "../../../utils/SertificateGenerator";
|
||||
import { generateCertificate, resolveImageUrl } from "../../../utils/SertificateGenerator";
|
||||
import { useGenerateCertificates } from "../../../../hooks/useCertificates";
|
||||
import Avatar from "../../Avatar";
|
||||
import ProgressBar from "../../ProgressBar";
|
||||
@@ -40,15 +40,15 @@ function StatusBadge({ status }: { status: boolean }) {
|
||||
}
|
||||
|
||||
// Main Component
|
||||
export default function EligibleInternTable({
|
||||
interns,
|
||||
loading,
|
||||
eligibleCount,
|
||||
projectId
|
||||
export default function EligibleInternTable({
|
||||
interns,
|
||||
loading,
|
||||
eligibleCount,
|
||||
projectId
|
||||
}: EligibleInternTableProps) {
|
||||
const navigate = useNavigate();
|
||||
const { project } = useProjectDetail(String(projectId));
|
||||
const { generate: SubmitCertificates, loading: generatingCertificates, error, success, reset } = useGenerateCertificates();
|
||||
const { generate: SubmitCertificates } = useGenerateCertificates();
|
||||
|
||||
const initialSelected = new Set(
|
||||
interns.filter(i => i.is_eligible).map(i => i.id_user)
|
||||
@@ -57,7 +57,6 @@ export default function EligibleInternTable({
|
||||
const [generating, setGenerating] = useState(false);
|
||||
const [generateError, setGenerateError] = useState<string | null>(null);
|
||||
|
||||
// Halaman (Pagination)
|
||||
const [page, setPage] = useState(1);
|
||||
const totalPages = Math.ceil(interns.length / PER_PAGE);
|
||||
const paginated = interns.slice((page - 1) * PER_PAGE, page * PER_PAGE);
|
||||
@@ -78,48 +77,52 @@ export default function EligibleInternTable({
|
||||
};
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!project?.certificate_template) {
|
||||
setGenerateError("Template sertifikat belum diupload.");
|
||||
return;
|
||||
}
|
||||
if (selected.size === 0) {
|
||||
setGenerateError("Pilih minimal satu intern.");
|
||||
return;
|
||||
}
|
||||
if (!project?.certificate_template) {
|
||||
setGenerateError("Template sertifikat belum diupload.");
|
||||
return;
|
||||
}
|
||||
if (selected.size === 0) {
|
||||
setGenerateError("Pilih minimal satu intern.");
|
||||
return;
|
||||
}
|
||||
|
||||
setGenerating(true);
|
||||
setGenerateError(null);
|
||||
setGenerating(true);
|
||||
setGenerateError(null);
|
||||
|
||||
try {
|
||||
// 1. Generate blob PNG per intern & kumpulkan ke ZIP
|
||||
const selectedInterns = interns.filter((i) => selected.has(i.id_user));
|
||||
const zip = new JSZip();
|
||||
try {
|
||||
const result = await SubmitCertificates(projectId, Array.from(selected));
|
||||
if (!result) return;
|
||||
|
||||
await Promise.all(
|
||||
selectedInterns.map(async (intern) => {
|
||||
const blob = await generateCertificate(
|
||||
project.certificate_template,
|
||||
intern.full_name
|
||||
const zip = new JSZip();
|
||||
const templateUrl = resolveImageUrl(project.certificate_template);
|
||||
|
||||
await Promise.all(
|
||||
result.map(async (cert) => {
|
||||
const verifyUrl = `${window.location.origin}/verify/${cert.uuid}`;
|
||||
|
||||
const blob = await generateCertificate(
|
||||
templateUrl,
|
||||
cert.user.full_name,
|
||||
cert.project.project_name,
|
||||
cert.certificate_no,
|
||||
verifyUrl
|
||||
);
|
||||
zip.file(`Sertifikat - ${intern.full_name}.png`, blob);
|
||||
})
|
||||
);
|
||||
|
||||
// 2. POST ke backend untuk mencatat sertifikat sudah di-generate
|
||||
const ok = await SubmitCertificates(projectId, Array.from(selected));
|
||||
if (!ok) return;
|
||||
zip.file(`Sertifikat - ${cert.user.full_name}.png`, blob);
|
||||
})
|
||||
);
|
||||
|
||||
// 3. Navigasi ke result page
|
||||
navigate(`/mentor/certificates/${projectId}/result`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setGenerateError(
|
||||
err instanceof Error ? err.message : "Gagal generate sertifikat."
|
||||
);
|
||||
} finally {
|
||||
setGenerating(false);
|
||||
}
|
||||
};
|
||||
// 3. Navigasi ke result page
|
||||
navigate(`/mentor/certificates/${projectId}/result`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setGenerateError(
|
||||
err instanceof Error ? err.message : "Gagal generate sertifikat."
|
||||
);
|
||||
} finally {
|
||||
setGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -281,10 +284,10 @@ export default function EligibleInternTable({
|
||||
{/* Bottom Action Bar */}
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
className="text-gray-700 hover:underline"
|
||||
onClick={()=> navigate(`/mentor/certificates/${project?.slug}/result`)}>
|
||||
Ke Hasil
|
||||
</button>
|
||||
className="text-gray-700 hover:underline"
|
||||
onClick={() => navigate(`/mentor/certificates/${project?.slug}/result`)}>
|
||||
Ke Hasil
|
||||
</button>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating || selected.size === 0}
|
||||
@@ -302,7 +305,7 @@ export default function EligibleInternTable({
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import api from "../../lib/api";
|
||||
import QRCode from "qrcode";
|
||||
|
||||
// Flag supaya font hanya di-load sekali (tidak berulang tiap generate)
|
||||
let fontsLoaded = false;
|
||||
|
||||
export function resolveImageUrl(path: string): string {
|
||||
if (!path) return "";
|
||||
if (path.startsWith("data:")) return path; // untuk QR data URL
|
||||
@@ -36,13 +33,13 @@ export async function ensureFontsLoaded(): Promise<void> {
|
||||
await document.fonts.ready;
|
||||
}
|
||||
|
||||
// ── Generate satu sertifikat sebagai Blob ─────────────────────────────────────
|
||||
// Generate satu sertifikat sebagai Blob
|
||||
export async function generateCertificate(
|
||||
templateUrl: string,
|
||||
internName: string,
|
||||
projectName: string,
|
||||
certificateNo: string,
|
||||
verifyUrl: string
|
||||
verifyUrl: string,
|
||||
): Promise<Blob> {
|
||||
// Pastikan font siap sebelum menggambar teks
|
||||
await ensureFontsLoaded();
|
||||
@@ -82,23 +79,24 @@ export async function generateCertificate(
|
||||
ctx.fillText(certificateNo, canvas.width * 0.825, canvas.height * 0.918);
|
||||
|
||||
// QR code — kalau verifyUrl diisi
|
||||
// if (verifyUrl) {
|
||||
// const qrDataUrl = await QRCode.toDataURL(verifyUrl, { width: 200, margin: 1 });
|
||||
// const qrImg = await loadImage(qrDataUrl);
|
||||
// const qrSize = canvas.width * 0.08;
|
||||
// ctx.drawImage(
|
||||
// qrImg,
|
||||
// canvas.width * 0.1 - qrSize / 2, // posisi X — sesuaikan
|
||||
// canvas.height * 0.88 - qrSize / 2, // posisi Y — sesuaikan
|
||||
// qrSize,
|
||||
// qrSize
|
||||
// );
|
||||
// }
|
||||
const qrDataUrl = await QRCode.toDataURL(verifyUrl, {
|
||||
width: 200,
|
||||
margin: 1,
|
||||
});
|
||||
const qrImg = await loadImage(qrDataUrl);
|
||||
const qrSize = canvas.width * 0.103;
|
||||
ctx.drawImage(
|
||||
qrImg,
|
||||
canvas.width * 0.77 - qrSize / 2, // posisi X — sesuaikan
|
||||
canvas.height * 0.715 - qrSize / 2, // posisi Y — sesuaikan
|
||||
qrSize,
|
||||
qrSize,
|
||||
);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
canvas.toBlob(
|
||||
(blob) => (blob ? resolve(blob) : reject(new Error("toBlob gagal"))),
|
||||
"image/png"
|
||||
"image/png",
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,52 +7,63 @@
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="preview" style="max-width: 100%;"></canvas>
|
||||
|
||||
<script>
|
||||
// Helper: bungkus loading image jadi Promise, biar bisa di-await
|
||||
function loadImage(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = reject;
|
||||
img.src = src;
|
||||
});
|
||||
}
|
||||
|
||||
async function draw() {
|
||||
// Tunggu semua font dari Google Fonts selesai load
|
||||
await document.fonts.ready;
|
||||
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
img.onload = () => {
|
||||
const canvas = document.getElementById("preview");
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img, 0, 0);
|
||||
// Load template sertifikat & QR dummy secara paralel
|
||||
const [templateImg, qrImg] = await Promise.all([
|
||||
loadImage("http://localhost:9000/uploads/1783080498359-420570422.png"),
|
||||
loadImage("https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=dummy-uuid-preview")
|
||||
]);
|
||||
|
||||
// Nama intern — pakai Great Vibes (font kaligrafi/script)
|
||||
ctx.font = `105px "Great Vibes", cursive`;
|
||||
ctx.fillStyle = "#800000";
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText("Jonathan Kristina", canvas.width * 0.57, canvas.height * 0.48);
|
||||
const canvas = document.getElementById("preview");
|
||||
canvas.width = templateImg.naturalWidth;
|
||||
canvas.height = templateImg.naturalHeight;
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Nama intern — versi kecil
|
||||
ctx.font = `30px "Great Vibes", cursive`;
|
||||
ctx.fillStyle = "#800000";
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText("Jonathan Kristina", canvas.width * 0.825, canvas.height * 0.895);
|
||||
// 1. Gambar template dulu (paling belakang)
|
||||
ctx.drawImage(templateImg, 0, 0);
|
||||
|
||||
// Nama project — pakai Grenze
|
||||
ctx.font = `400 54px "Grenze", serif`;
|
||||
ctx.fillStyle = "#090909";
|
||||
ctx.fillText("Internify Platform Dev", canvas.width * 0.57, canvas.height * 0.615);
|
||||
// 2. Nama intern — Great Vibes
|
||||
ctx.font = `105px "Great Vibes", cursive`;
|
||||
ctx.fillStyle = "#800000";
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText("Jonathan Kristina", canvas.width * 0.57, canvas.height * 0.48);
|
||||
|
||||
// Certificate no — monospace biasa
|
||||
ctx.font = `50px Grenze`;
|
||||
ctx.fillStyle = "#090909";
|
||||
ctx.fillText("CERT/20260609/PRJ2/USR5", canvas.width * 0.666, canvas.height * 0.305);
|
||||
ctx.font = `30px "Great Vibes", cursive`;
|
||||
ctx.fillText("Jonathan Kristina", canvas.width * 0.825, canvas.height * 0.895);
|
||||
|
||||
// Certificate no — monospace biasa
|
||||
ctx.font = `20px Grenze`;
|
||||
ctx.fillStyle = "#800000";
|
||||
ctx.fillText("CERT/20260609/PRJ2/USR5",canvas.width * 0.825, canvas.height * 0.918);
|
||||
};
|
||||
// 3. Nama project — Grenze
|
||||
ctx.font = `400 54px "Grenze", serif`;
|
||||
ctx.fillStyle = "#090909";
|
||||
ctx.fillText("Internify Platform Dev", canvas.width * 0.57, canvas.height * 0.615);
|
||||
|
||||
img.src = "http://localhost:9000/uploads/1783080498359-420570422.png"; // ganti URL template kamu
|
||||
// 4. Certificate no
|
||||
ctx.font = `50px Grenze`;
|
||||
ctx.fillText("CERT/20260609/PRJ2/USR5", canvas.width * 0.665, canvas.height * 0.305);
|
||||
|
||||
ctx.font = `20px Grenze`;
|
||||
ctx.fillStyle = "#800000";
|
||||
ctx.fillText("CERT/20260609/PRJ2/USR5", canvas.width * 0.825, canvas.height * 0.918);
|
||||
|
||||
// 5. QR code — posisi & ukuran pakai persentase, sama seperti elemen lain
|
||||
const qrSize = canvas.width * 0.103; // atur besar-kecil di sini
|
||||
const qrX = canvas.width * 0.77; // titik kiri-atas QR (bukan tengah!)
|
||||
const qrY = canvas.height * 0.715;
|
||||
ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize);
|
||||
}
|
||||
|
||||
draw();
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// hooks/useCertificates.ts
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import type { Certificate } from "../types/certificate.types";
|
||||
import type { Certificate, CertificateVerifyResult } from "../types/certificate.types";
|
||||
import {
|
||||
claimCertificate,
|
||||
getMyCertificates,
|
||||
@@ -8,7 +8,8 @@ import {
|
||||
getCertificateDetail,
|
||||
getCertificatesByProject,
|
||||
uploadCertificateTemplate,
|
||||
generateCertificate
|
||||
generateCertificate,
|
||||
verifyCertificateByUuid
|
||||
} from "../services/CertificateService";
|
||||
import { AxiosError } from "axios";
|
||||
|
||||
@@ -106,20 +107,26 @@ export const useGenerateCertificates = () => {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const generate = async (id_project: number, id_users: number[]): Promise<boolean> => {
|
||||
const generate = async (
|
||||
id_project: number,
|
||||
id_users: number[]
|
||||
): Promise<Certificate[] | null> => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
try {
|
||||
await generateCertificate(id_project, id_users);
|
||||
const data = await generateCertificate(id_project, id_users);
|
||||
setSuccess(true);
|
||||
return true;
|
||||
return data;
|
||||
} catch (err) {
|
||||
if (err instanceof AxiosError) {
|
||||
switch (err.response?.status) {
|
||||
case 400:
|
||||
setError("Ada intern yang tidak eligible atau parameter tidak lengkap.");
|
||||
break;
|
||||
case 401:
|
||||
setError("Sesi kamu berakhir, silakan login ulang.");
|
||||
break;
|
||||
case 403:
|
||||
setError("Hanya mentor/admin project ini yang bisa generate sertifikat.");
|
||||
break;
|
||||
@@ -132,7 +139,7 @@ export const useGenerateCertificates = () => {
|
||||
} else {
|
||||
setError("Gagal generate sertifikat.");
|
||||
}
|
||||
return false;
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -159,4 +166,21 @@ export const useUploadCertificateTemplate = () => {
|
||||
};
|
||||
|
||||
return { upload, loading, error };
|
||||
};
|
||||
};
|
||||
|
||||
export const useCertificateVerification = (uuid: string) => {
|
||||
const [verification, setVerification] = useState<CertificateVerifyResult | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!uuid) return;
|
||||
verifyCertificateByUuid(uuid)
|
||||
.then(setVerification)
|
||||
.catch(() => setError("Gagal memverifikasi sertifikat."))
|
||||
.finally(() => setLoading(false));
|
||||
}, [uuid]);
|
||||
|
||||
return { verification, loading, error };
|
||||
|
||||
}
|
||||
@@ -12,9 +12,10 @@ export const claimCertificate = async (id_project: number): Promise<Certificate>
|
||||
return res.data.data;
|
||||
};
|
||||
|
||||
export const generateCertificate = async (id_project: number, id_users: number[]): Promise<void> => {
|
||||
// POST /certificate-api/generate
|
||||
export const generateCertificate = async (id_project: number, id_users: number[]): Promise<Certificate[]> => {
|
||||
const res = await api.post("/certificate-api/generate", { id_project, id_users });
|
||||
return res.data.data;
|
||||
return res.data.data.certificates;
|
||||
};
|
||||
|
||||
// GET /certificate-api/my-certificates
|
||||
|
||||
@@ -32,4 +32,11 @@ export interface CertificateVerification {
|
||||
export interface CertificateTemplate {
|
||||
id_project: number;
|
||||
certificate_template: string;
|
||||
}
|
||||
|
||||
export interface CertificateVerifyResult {
|
||||
uuid: string;
|
||||
intern_name: string;
|
||||
project_name: string;
|
||||
created_at: string;
|
||||
}
|
||||
Reference in New Issue
Block a user