Generate Certificates: Adding QR with UUID of certificates to verify

src/Layout/Navbar.tsx

@@ -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>

src/Pages/internify/VerificationCert.tsx

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

src/Pages/internify/intern/InternCertDetail.tsx

@@ -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";
 

src/Pages/internify/intern/components/SubmissionStatusTable.tsx

@@ -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">
+              <a
-                <FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
+                href={resolveImageUrl(filePath ?? "")}
-                {filePath ? filePath.split("/").pop() : "File submitted"}
+                target="_blank"
-              </div>
+                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">

src/Pages/internify/intern/components/TaskForm-file.tsx

@@ -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,6 +137,17 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
           </div>
         )}
       </div>
+
+      <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"
@@ -125,6 +155,7 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
           {loading ? "Mengirim..." : isEditing ? "Update Submission" : "Save Changes"}
           <LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
         </button>
+      </div>
     </form>
   );
 }

src/Pages/internify/mentor/components/EligibleInternTable.tsx

@@ -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";
@@ -48,7 +48,7 @@ export default function EligibleInternTable({
 }: 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);
@@ -91,23 +90,27 @@ export default function EligibleInternTable({
     setGenerateError(null);
 
     try {
-    // 1. Generate blob PNG per intern & kumpulkan ke ZIP
+      const result = await SubmitCertificates(projectId, Array.from(selected));
-    const selectedInterns = interns.filter((i) => selected.has(i.id_user));
+      if (!result) return;
+
       const zip = new JSZip();
+      const templateUrl = resolveImageUrl(project.certificate_template);
 
       await Promise.all(
-      selectedInterns.map(async (intern) => {
+        result.map(async (cert) => {
+          const verifyUrl = `${window.location.origin}/verify/${cert.uuid}`;
+
           const blob = await generateCertificate(
-          project.certificate_template,
+          templateUrl,
-          intern.full_name
+          cert.user.full_name,
-        );
+          cert.project.project_name,
-        zip.file(`Sertifikat - ${intern.full_name}.png`, blob);
+          cert.certificate_no,
-      })
+          verifyUrl
         );
 
-    // 2. POST ke backend untuk mencatat sertifikat sudah di-generate
+          zip.file(`Sertifikat - ${cert.user.full_name}.png`, blob);
-    const ok = await SubmitCertificates(projectId, Array.from(selected));
+        })
-    if (!ok) return;
+      );
 
       // 3. Navigasi ke result page
       navigate(`/mentor/certificates/${projectId}/result`);

src/Pages/utils/SertificateGenerator.ts

@@ -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, {
-  //   const qrDataUrl = await QRCode.toDataURL(verifyUrl, { width: 200, margin: 1 });
+    width: 200,
-  //   const qrImg = await loadImage(qrDataUrl);
+    margin: 1,
-  //   const qrSize = canvas.width * 0.08;
+  });
-  //   ctx.drawImage(
+  const qrImg = await loadImage(qrDataUrl);
-  //     qrImg,
+  const qrSize = canvas.width * 0.103;
-  //     canvas.width * 0.1 - qrSize / 2,  // posisi X — sesuaikan
+  ctx.drawImage(
-  //     canvas.height * 0.88 - qrSize / 2, // posisi Y — sesuaikan
+    qrImg,
-  //     qrSize,
+    canvas.width * 0.77 - qrSize / 2, // posisi X — sesuaikan
-  //     qrSize
+    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",
     );
   });
 }

src/Pages/utils/testlayout.html

@@ -7,52 +7,63 @@
 </head>
 <body>
   <canvas id="preview" style="max-width: 100%;"></canvas>
-
   <script>
-    async function draw() {
+    // Helper: bungkus loading image jadi Promise, biar bisa di-await
-      // Tunggu semua font dari Google Fonts selesai load
+    function loadImage(src) {
-      await document.fonts.ready;
+      return new Promise((resolve, reject) => {
-
         const img = new Image();
         img.crossOrigin = "anonymous";
-      img.onload = () => {
+        img.onload = () => resolve(img);
-        const canvas = document.getElementById("preview");
+        img.onerror = reject;
-        canvas.width = img.naturalWidth;
+        img.src = src;
-        canvas.height = img.naturalHeight;
+      });
-        const ctx = canvas.getContext("2d");
+    }
-        ctx.drawImage(img, 0, 0);
 
-        // Nama intern — pakai Great Vibes (font kaligrafi/script)
+    async function draw() {
+      await document.fonts.ready;
+
+      // 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")
+      ]);
+
+      const canvas = document.getElementById("preview");
+      canvas.width = templateImg.naturalWidth;
+      canvas.height = templateImg.naturalHeight;
+      const ctx = canvas.getContext("2d");
+
+      // 1. Gambar template dulu (paling belakang)
+      ctx.drawImage(templateImg, 0, 0);
+
+      // 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);
 
-        // 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);
 
-        // Nama project — pakai Grenze
+      // 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);
 
-        // Certificate no — monospace biasa
+      // 4. Certificate no
       ctx.font = `50px Grenze`;
-        ctx.fillStyle = "#090909";
+      ctx.fillText("CERT/20260609/PRJ2/USR5", canvas.width * 0.665, canvas.height * 0.305);
-        ctx.fillText("CERT/20260609/PRJ2/USR5", canvas.width * 0.666, canvas.height * 0.305);
 
-        // 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);
-      };
 
-      img.src = "http://localhost:9000/uploads/1783080498359-420570422.png"; // ganti URL template kamu
+      // 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();

src/hooks/useCertificates.ts

@@ -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);
     }
@@ -160,3 +167,20 @@ 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 };
+
+}

src/services/CertificateService.ts

@@ -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

src/types/certificate.types.ts

@@ -33,3 +33,10 @@ export interface CertificateTemplate {
   id_project: number;
   certificate_template: string;
 }
+
+export interface CertificateVerifyResult {
+  uuid: string;
+  intern_name: string;
+  project_name: string;
+  created_at: string;
+}