hoàn thành bước3.2. PDF Gallery (Dashboard)

2026-08-05 18:23:11 +07:00 · 2026-03-31 14:26:48 +07:00
parent ebfa869a26
commit 9450cd3ed4
18 changed files with 766 additions and 1 deletions
@@ -0,0 +1,60 @@
+import { useRouter } from "next/navigation";
+import type { PDFItem } from "@/types";
+
+interface Props {
+  pdf: PDFItem;
+  onDelete: (id: number) => void;
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export default function PDFCard({ pdf, onDelete }: Props) {
+  const router = useRouter();
+
+  return (
+    <div
+      onClick={() => router.push(`/workbook/${pdf.id}`)}
+      className="group relative bg-white rounded-2xl shadow-sm border border-gray-200 hover:shadow-md hover:border-blue-300 transition cursor-pointer overflow-hidden"
+    >
+      {/* Thumbnail placeholder */}
+      <div className="bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center h-40">
+        <svg className="w-14 h-14 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
+            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        </svg>
+      </div>
+
+      {/* Meta */}
+      <div className="p-4">
+        <p className="font-semibold text-sm text-gray-800 line-clamp-2 leading-snug" title={pdf.title}>
+          {pdf.title}
+        </p>
+        <p className="mt-1 text-xs text-gray-400">{formatDate(pdf.created_at)}</p>
+        {pdf.total_pages != null && (
+          <p className="text-xs text-gray-400">{pdf.total_pages} pages</p>
+        )}
+      </div>
+
+      {/* Delete button — visible on hover */}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete(pdf.id);
+        }}
+        title="Delete"
+        className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition bg-white/80 hover:bg-red-50 text-gray-500 hover:text-red-600 rounded-lg p-1.5 shadow"
+      >
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+        </svg>
+      </button>
+    </div>
+  );
+}
@@ -0,0 +1,121 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { api } from "@/lib/api";
+import type { PDFItem } from "@/types";
+
+interface Props {
+  onUploaded: (newPdfs: PDFItem[]) => void;
+}
+
+export default function UploadZone({ onUploaded }: Props) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [errors, setErrors] = useState<string[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const uploadFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const pdfFiles = Array.from(files).filter((f) => f.type === "application/pdf");
+      if (pdfFiles.length === 0) {
+        setErrors(["Please select PDF files only."]);
+        return;
+      }
+
+      setUploading(true);
+      setErrors([]);
+
+      const formData = new FormData();
+      pdfFiles.forEach((f) => formData.append("files", f));
+
+      try {
+        const results = await api.uploadPdfs(formData);
+        const succeeded = results.filter((r) => r.success && r.pdf).map((r) => r.pdf!);
+        const failed = results.filter((r) => !r.success);
+
+        if (failed.length > 0) {
+          setErrors(failed.map((r) => `${r.filename}: ${r.error}`));
+        }
+        if (succeeded.length > 0) {
+          onUploaded(succeeded);
+        }
+      } catch (err: unknown) {
+        setErrors([err instanceof Error ? err.message : "Upload failed."]);
+      } finally {
+        setUploading(false);
+        if (inputRef.current) inputRef.current.value = "";
+      }
+    },
+    [onUploaded]
+  );
+
+  function onDragOver(e: React.DragEvent) {
+    e.preventDefault();
+    setIsDragging(true);
+  }
+  function onDragLeave() {
+    setIsDragging(false);
+  }
+  function onDrop(e: React.DragEvent) {
+    e.preventDefault();
+    setIsDragging(false);
+    uploadFiles(e.dataTransfer.files);
+  }
+  function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files) uploadFiles(e.target.files);
+  }
+
+  return (
+    <div className="mb-8">
+      <div
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        onClick={() => inputRef.current?.click()}
+        className={`cursor-pointer border-2 border-dashed rounded-2xl px-6 py-12 text-center transition
+          ${isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-blue-400 hover:bg-gray-50"}`}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept=".pdf,application/pdf"
+          multiple
+          className="hidden"
+          onChange={onInputChange}
+        />
+
+        {uploading ? (
+          <div className="flex flex-col items-center gap-2 text-blue-600">
+            <svg className="animate-spin h-8 w-8" viewBox="0 0 24 24" fill="none">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+            </svg>
+            <p className="text-sm font-medium">Uploading…</p>
+          </div>
+        ) : (
+          <>
+            <svg className="mx-auto h-10 w-10 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                d="M12 16V4m0 0L8 8m4-4l4 4M4 20h16" />
+            </svg>
+            <p className="text-sm font-semibold text-gray-700">
+              Drag &amp; drop PDFs here, or{" "}
+              <span className="text-blue-600">click to browse</span>
+            </p>
+            <p className="mt-1 text-xs text-gray-400">Multiple files supported · Max 50 MB each</p>
+          </>
+        )}
+      </div>
+
+      {errors.length > 0 && (
+        <ul className="mt-3 space-y-1">
+          {errors.map((e, i) => (
+            <li key={i} className="text-xs text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-1.5">
+              {e}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}