From 546a28066b1b87f161aef0109207e6c5d327865c Mon Sep 17 00:00:00 2001
From: "JUSTDUCK\\trong" <trongducdoan25@gmail.com>
Date: Tue, 18 Nov 2025 17:42:56 +0700
Subject: [PATCH] [FLN-196][Duc][UI] Fix Student my course card, allow download
 summaries [18.11.2025]

---
 FrontEnd/src/assets/CourseList/CourseList.css | 69 ++++++-----------
 .../src/assets/WatchCourse/SummaryModal.css   | 35 ++++-----
 .../src/components/CourseList/CourseCard.jsx  | 36 ++++-----
 .../components/WatchCourse/SummaryModal.jsx   | 75 +++++++++----------
 4 files changed, 92 insertions(+), 123 deletions(-)

diff --git a/FrontEnd/src/assets/CourseList/CourseList.css b/FrontEnd/src/assets/CourseList/CourseList.css
index 9fd6545..de2bc9a 100644
--- a/FrontEnd/src/assets/CourseList/CourseList.css
+++ b/FrontEnd/src/assets/CourseList/CourseList.css
@@ -195,8 +195,8 @@
   margin-bottom: 24px;
 }
 
-/* Course card */
-.course-card {
+/* Course card - với prefix để tránh bị đè CSS */
+.course-list-card {
   background-color: #fff;
   border-radius: 12px;
   overflow: hidden;
@@ -204,23 +204,23 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.course-card:hover {
+.course-list-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
-.course-thumbnail {
+.course-list-card-thumbnail {
   position: relative;
   aspect-ratio: 16/9;
 }
 
-.course-thumbnail img {
+.course-list-card-thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.course-status-badge {
+.course-list-card-status-badge {
   position: absolute;
   top: 8px;
   right: 8px;
@@ -232,64 +232,41 @@
   letter-spacing: 0.5px;
 }
 
-.course-status-completed {
+.course-list-card-status-completed {
   background: rgba(34, 197, 94, 0.9);
   color: white;
 }
 
-.course-status-progress {
+.course-list-card-status-progress {
   background: rgba(99, 102, 241, 0.9);
   color: white;
 }
 
-.course-status-default {
+.course-list-card-status-default {
   background: rgba(107, 114, 128, 0.9);
   color: white;
 }
 
-/* Status badge styles matching StudentDashboard */
-.status-badge {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.status-badge.completed {
-  background: rgba(34, 197, 94, 0.9);
-  color: white;
-}
-
-.status-badge.in-progress {
-  background: rgba(99, 102, 241, 0.9);
-  color: white;
-}
-
-.course-info {
+.course-list-card-info {
   padding: 16px;
   display: flex;
   flex-direction: column;
   height: calc(100% - 9rem); /* 9rem là chiều cao của thumbnail (16/9 ratio) */
 }
 
-.course-meta {
+.course-list-card-meta {
   display: flex;
   gap: 12px;
   margin-bottom: 8px;
 }
 
-.course-category,
-.course-instructor {
+.course-list-card-category,
+.course-list-card-instructor {
   color: #6f767e;
   font-size: 0.75rem;
 }
 
-.course-info h3 {
+.course-list-card-info h3 {
   color: #1a1d1f;
   font-size: 1rem;
   font-weight: 500;
@@ -301,16 +278,14 @@
   line-height: 1.4;
 }
 
-
-
-.course-footer {
+.course-list-card-footer {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: auto;
 }
 
-.course-watch-btn {
+.course-list-card-watch-btn {
   width: 100%;
   padding: 12px;
   background-color: #ff6b38;
@@ -322,21 +297,21 @@
   transition: background-color 0.3s ease;
 }
 
-.course-watch-btn:hover {
+.course-list-card-watch-btn:hover {
   background-color: #e85a2c;
 }
 
-.course-progress-status {
+.course-list-card-progress-status {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.course-progress-wrapper {
+.course-list-card-progress-wrapper {
   flex: 1;
 }
 
-.course-progress {
+.course-list-card-progress {
   width: 100%;
   height: 8px;
   background-color: #f4f5f6;
@@ -344,13 +319,13 @@
   overflow: hidden;
 }
 
-.course-progress-bar {
+.course-list-card-progress-bar {
   height: 100%;
   border-radius: 4px;
   transition: width 0.3s ease;
 }
 
-.course-completion-text {
+.course-list-card-completion-text {
   color: #6f767e;
   font-size: 0.75rem;
   text-align: right;
diff --git a/FrontEnd/src/assets/WatchCourse/SummaryModal.css b/FrontEnd/src/assets/WatchCourse/SummaryModal.css
index 1397a34..6cf2800 100644
--- a/FrontEnd/src/assets/WatchCourse/SummaryModal.css
+++ b/FrontEnd/src/assets/WatchCourse/SummaryModal.css
@@ -360,6 +360,9 @@
   border-radius: 0 0 12px 12px;
   display: flex;
   justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
 .summary-close-button {
@@ -378,32 +381,24 @@
   background-color: #4b5563;
 }
 
-/* Copy to Clipboard Button */
-.summary-copy-button {
-  background: #f3f4f6;
-  color: #374151;
-  border: 1px solid #d1d5db;
-  padding: 8px 16px;
+.summary-download-button {
+  background-color: #3b82f6;
+  color: white;
+  border: none;
+  padding: 10px 18px;
   border-radius: 6px;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease, transform 0.2s ease;
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-right: 12px;
 }
 
-.summary-copy-button:hover {
-  background-color: #e5e7eb;
-  border-color: #9ca3af;
-}
-
-.summary-copy-button.copied {
-  background-color: #dcfce7;
-  color: #166534;
-  border-color: #bbf7d0;
+.summary-download-button:hover {
+  background-color: #2563eb;
+  transform: translateY(-1px);
 }
 
 /* Reading Progress Indicator */
@@ -466,8 +461,8 @@
     gap: 8px;
   }
   
-  .summary-copy-button {
-    margin-right: 0;
+  .summary-download-button {
+    width: 100%;
     justify-content: center;
   }
   
diff --git a/FrontEnd/src/components/CourseList/CourseCard.jsx b/FrontEnd/src/components/CourseList/CourseCard.jsx
index 9978068..197a1f8 100644
--- a/FrontEnd/src/components/CourseList/CourseCard.jsx
+++ b/FrontEnd/src/components/CourseList/CourseCard.jsx
@@ -18,11 +18,11 @@ const CourseCard = ({
   const getStatusColor = () => {
     switch (status) {
       case "completed":
-        return "course-status-completed";
+        return "course-list-card-status-completed";
       case "in-progress":
-        return "course-status-progress";
+        return "course-list-card-status-progress";
       default:
-        return "course-status-default";
+        return "course-list-card-status-default";
     }
   };
 
@@ -34,27 +34,27 @@ const CourseCard = ({
 
   return (
     <div
-      className="course-card"
+      className="course-list-card"
       role="article"
       onClick={onCardClick}
       style={{ cursor: onCardClick ? "pointer" : undefined }}
     >
-      <div className="course-thumbnail">
+      <div className="course-list-card-thumbnail">
         <img src={thumbnail} alt={`${title} course thumbnail`} loading="lazy" />
-        <div className={`course-status-badge ${getStatusColor()}`}>
+        <div className={`course-list-card-status-badge ${getStatusColor()}`}>
           {status.replace("-", " ")}
         </div>
       </div>
-      <div className="course-info">
-        <div className="course-meta">
-          <span className="course-category">{category}</span>
-          <span className="course-instructor">{instructor}</span>
+      <div className="course-list-card-info">
+        <div className="course-list-card-meta">
+          <span className="course-list-card-category">{category}</span>
+          <span className="course-list-card-instructor">{instructor}</span>
         </div>
         <h3 title={title}>{title}</h3>
-        <div className="course-footer">
+        <div className="course-list-card-footer">
           <button
-            className="course-watch-btn"
-            aria-label={`$${
+            className="course-list-card-watch-btn"
+            aria-label={`${
               status === "completed"
                 ? reviewMode
                   ? "Update Review"
@@ -76,17 +76,17 @@ const CourseCard = ({
                 : "Review Course"
               : "Continue Learning"}
           </button>
-          <div className="course-progress-status">
-            <div className="course-progress-wrapper">
+          <div className="course-list-card-progress-status">
+            <div className="course-list-card-progress-wrapper">
               <div
-                className="course-progress"
+                className="course-list-card-progress"
                 role="progressbar"
                 aria-valuenow={progress}
                 aria-valuemin="0"
                 aria-valuemax="100"
               >
                 <div
-                  className="course-progress-bar"
+                  className="course-list-card-progress-bar"
                   style={{
                     width: `${progress}%`,
                     backgroundColor: getProgressColor(),
@@ -94,7 +94,7 @@ const CourseCard = ({
                 />
               </div>
             </div>
-            <span className="course-completion-text">
+            <span className="course-list-card-completion-text">
               {progress}% Completed{" "}
               {totalLessons > 0 &&
                 `(${completedLessons}/${totalLessons} lessons)`}
diff --git a/FrontEnd/src/components/WatchCourse/SummaryModal.jsx b/FrontEnd/src/components/WatchCourse/SummaryModal.jsx
index 0555d4e..de89c8c 100644
--- a/FrontEnd/src/components/WatchCourse/SummaryModal.jsx
+++ b/FrontEnd/src/components/WatchCourse/SummaryModal.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import "../../assets/WatchCourse/SummaryModal.css";
 
 const SummaryModal = ({ 
@@ -10,8 +10,6 @@ const SummaryModal = ({
   lessonTitle,
   lessonType 
 }) => {
-  const [copySuccess, setCopySuccess] = useState(false);
-  
   if (!isOpen) return null;
 
   const getModalTitle = () => {
@@ -25,6 +23,20 @@ const SummaryModal = ({
       : 'Đang phân tích tài liệu và tạo tóm tắt...';
   };
 
+  const getDownloadFileName = () => {
+    const now = new Date().toISOString().split('T')[0];
+    const lessonTypeSlug = lessonType === 'video' ? 'video' : 'tai-lieu';
+    const titleSlug = lessonTitle
+      ? lessonTitle
+          .toLowerCase()
+          .normalize('NFD')
+          .replace(/[\u0300-\u036f]/g, '')
+          .replace(/[^a-z0-9]+/g, '-')
+          .replace(/^-+|-+$/g, '')
+      : 'bai-hoc';
+    return `tom-tat-${lessonTypeSlug}-${titleSlug || 'bai-hoc'}-${now}.txt`;
+  };
+
   // Enhanced summary formatting function
   const formatSummaryContent = (summaryText) => {
     if (!summaryText) return null;
@@ -134,30 +146,25 @@ const SummaryModal = ({
     return <span dangerouslySetInnerHTML={{ __html: highlightedText }} />;
   };
 
-  // Copy to clipboard function
-  const handleCopyToClipboard = async () => {
+  const handleDownloadSummary = () => {
     if (!summary) return;
-    
-    try {
-      await navigator.clipboard.writeText(summary);
-      setCopySuccess(true);
-      setTimeout(() => setCopySuccess(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy text: ', err);
-      // Fallback for older browsers
-      const textArea = document.createElement('textarea');
-      textArea.value = summary;
-      document.body.appendChild(textArea);
-      textArea.select();
-      try {
-        document.execCommand('copy');
-        setCopySuccess(true);
-        setTimeout(() => setCopySuccess(false), 2000);
-      } catch (fallbackErr) {
-        console.error('Fallback copy failed: ', fallbackErr);
-      }
-      document.body.removeChild(textArea);
-    }
+
+    const header = [
+      getModalTitle(),
+      `Loại bài học: ${lessonType === 'video' ? 'Video' : 'Tài liệu'}`,
+      `Ngày tải xuống: ${new Date().toLocaleString('vi-VN')}`
+    ].join('\n');
+
+    const fileContent = `${header}\n\n------------------------------\n\n${summary}`;
+    const blob = new Blob([fileContent], { type: 'text/plain;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = getDownloadFileName();
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
   };
 
   return (
@@ -221,19 +228,11 @@ const SummaryModal = ({
         <div className="summary-modal-actions">
           {!loading && !error && summary && (
             <button 
-              className={`summary-copy-button ${copySuccess ? 'copied' : ''}`}
-              onClick={handleCopyToClipboard}
-              title="Sao chép nội dung tóm tắt"
+              className="summary-download-button"
+              onClick={handleDownloadSummary}
+              title="Tải bản tóm tắt dạng tệp TXT"
             >
-              {copySuccess ? (
-                <>
-                  ✅ Đã sao chép
-                </>
-              ) : (
-                <>
-                  📋 Sao chép
-                </>
-              )}
+              Tải xuống
             </button>
           )}
           <button className="summary-close-button" onClick={onClose}>