cập nhật ui dashboard

src/App.jsx

@@ -13,6 +13,7 @@ import CreateAgentTips from "./components/createspace/CreateAgentTips";
 import ManageAgent from "./components/createspace/ManageAgent";
 import ManageAgentTips from "./components/createspace/ManageAgentTips";
 import LoginPage from "./pages/LoginPage";
+import TADashboard from "./pages/TADashboard";
 import AppLoadingScreen from "./components/AppLoadingScreen";
 import { initializeAuth } from "./store/slices/authSlice";
 import {
@@ -346,6 +347,10 @@ function App() {
           {renderCreateContent()}
           {renderCreateTips()}
         </>
+      ) : currentView === "dashboard" ? (
+        <>
+          <TADashboard />
+        </>
       ) : (
         <>
           <div

src/components/Sidebar.jsx

@@ -8,7 +8,9 @@ import {
   openCreateSpace,
   openSettings,
   closeSettings,
+  navigateToDashboard,
 } from "../store/slices/appSlice";
+import { FiBarChart2 } from "react-icons/fi";
 
 
 function Sidebar() {
@@ -20,7 +22,7 @@ function Sidebar() {
   const { spaces, loading: spacesLoading, spacesFetched } = useSelector(
     (state) => state.space,
   );
-  const { isAuthenticated } = useSelector((state) => state.auth);
+  const { isAuthenticated, user } = useSelector((state) => state.auth);
   const currentView = isSettings ? "settings" : activeView;
 
   console.log("[Sidebar] Render - spaces count:", spaces.length, "spacesLoading:", spacesLoading, "spaces:", spaces.map(s => ({ id: s.id, name: s.name })));
@@ -65,6 +67,15 @@ function Sidebar() {
         />
       </div>
       <div className="flex flex-col items-center gap-2">
+        {user && activeSpace && spaces.find(s => s.id === activeSpace)?.owner_id === user.id && (activeView === "space" || activeView === "dashboard") && (
+          <SpaceIcon
+            icon="dashboard"
+            isActive={currentView === "dashboard"}
+            hasNotification={false}
+            onClick={() => dispatch(navigateToDashboard())}
+            title="TA Dashboard"
+          />
+        )}
         <SpaceIcon
           icon="settings"
           isActive={currentView === "settings"}

src/components/sidebar/SpaceIcon.jsx

@@ -1,10 +1,11 @@
-import { FiPlus, FiSettings } from "react-icons/fi";
+import { FiPlus, FiSettings, FiBarChart2 } from "react-icons/fi";
 import { getSpaceIconComponent } from "../../constants/spaceIcons";
 
 // Built-in system icons (not from space registry)
 const systemIcons = {
   plus: FiPlus,
   settings: FiSettings,
+  dashboard: FiBarChart2,
 };
 
 function SpaceIcon({ icon, name, isActive, hasNotification, onClick, title }) {

src/pages/TADashboard.css

@@ -0,0 +1,429 @@
+:root {
+  --ta-bg: #0f1117;
+  --ta-bg2: #1a1d27;
+  --ta-bg3: #242836;
+  --ta-bg4: #2e3347;
+  --ta-border: #2e3347;
+  --ta-border2: #3d4460;
+  --ta-text: #e8eaed;
+  --ta-text2: #9aa0b4;
+  --ta-text3: #636b83;
+  --ta-accent: #22c55e;
+  --ta-accent2: #16a34a;
+  --ta-accent-bg: rgba(34, 197, 94, 0.12);
+  --ta-red: #ef4444;
+  --ta-red-bg: rgba(239, 68, 68, 0.12);
+  --ta-amber: #f59e0b;
+  --ta-amber-bg: rgba(245, 158, 11, 0.12);
+  --ta-blue: #3b82f6;
+  --ta-blue-bg: rgba(59, 130, 246, 0.12);
+  --ta-purple: #a855f7;
+  --ta-purple-bg: rgba(168, 85, 247, 0.12);
+  --ta-radius: 8px;
+  --ta-radius-lg: 12px;
+}
+
+.ta-dashboard-container {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  background: var(--ta-bg);
+  color: var(--ta-text);
+  font-family: 'Inter', sans-serif;
+  overflow: hidden;
+}
+
+/* Internal Sidebar */
+.ta-internal-sidebar {
+  width: 220px;
+  background: var(--ta-bg2);
+  border-right: 1px solid var(--ta-border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sb-head {
+  padding: 16px;
+  border-bottom: 1px solid var(--ta-border);
+}
+
+.sb-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sb-sub {
+  font-size: 11px;
+  color: var(--ta-text3);
+  margin-top: 2px;
+}
+
+.sb-section {
+  font-size: 10px;
+  color: var(--ta-text3);
+  font-weight: 600;
+  padding: 12px 16px 4px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.sb-item {
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition: 0.15s;
+  font-size: 12.5px;
+  color: var(--ta-text2);
+}
+
+.sb-item:hover {
+  background: var(--ta-bg3);
+}
+
+.sb-item.active {
+  background: var(--ta-bg3);
+  border-right: 2px solid var(--ta-accent);
+  color: var(--ta-text);
+}
+
+.sb-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+/* Main Content Area */
+.ta-main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.ta-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--ta-border);
+  background: rgba(15, 17, 23, 0.7);
+  backdrop-filter: blur(10px);
+  z-index: 10;
+}
+
+.tb-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.tb-sub {
+  font-size: 12px;
+  color: var(--ta-text3);
+}
+
+.ta-scroll-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+/* Metrics Grid */
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.metric-card {
+  background: var(--ta-bg2);
+  border: 1px solid var(--ta-border);
+  border-radius: var(--ta-radius-lg);
+  padding: 16px;
+}
+
+.mc-label {
+  font-size: 11px;
+  color: var(--ta-text3);
+  margin-bottom: 8px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.mc-val {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.mc-sub {
+  font-size: 11px;
+  margin-top: 8px;
+  font-weight: 500;
+}
+
+.mc-up { color: var(--ta-accent); }
+.mc-dn { color: var(--ta-red); }
+
+/* Badges */
+.ta-badge {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+}
+
+.badge-red { background: var(--ta-red-bg); color: var(--ta-red); }
+.badge-amber { background: var(--ta-amber-bg); color: var(--ta-amber); }
+.badge-blue { background: var(--ta-blue-bg); color: var(--ta-blue); }
+
+/* List Cards */
+.ta-card {
+  background: var(--ta-bg2);
+  border: 1px solid var(--ta-border);
+  border-radius: var(--ta-radius-lg);
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.card-head {
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--ta-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ta-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--ta-border);
+  transition: 0.15s;
+}
+
+.ta-row:hover {
+  background: var(--ta-bg3);
+}
+
+.ta-row:last-child { border-bottom: none; }
+
+.student-av {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--ta-border);
+}
+
+.cell-info { flex: 1; }
+.cell-name { font-size: 14px; font-weight: 600; }
+.cell-sub { font-size: 12px; color: var(--ta-text3); }
+
+/* Source Selector */
+.source-grid {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+
+.source-opt {
+  padding: 8px 16px;
+  border-radius: var(--ta-radius);
+  border: 1px solid var(--ta-border);
+  background: var(--ta-bg3);
+  font-size: 12px;
+  color: var(--ta-text2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: 0.2s;
+}
+
+.source-opt.active {
+  border-color: var(--ta-accent);
+  background: var(--ta-accent-bg);
+  color: var(--ta-accent);
+}
+
+/* Summary Content */
+.summary-draft-body {
+  padding: 16px;
+  background: var(--ta-bg);
+  border-radius: 8px;
+  margin: 12px 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--ta-text2);
+  white-space: pre-wrap;
+}
+
+.ta-btn {
+  padding: 8px 16px;
+  border-radius: var(--ta-radius);
+  border: 1px solid var(--ta-border);
+  background: var(--ta-bg3);
+  color: var(--ta-text);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: 0.2s;
+}
+
+.ta-btn:hover {
+  border-color: var(--ta-border2);
+  color: var(--ta-text);
+}
+
+.ta-btn-primary {
+  background: var(--ta-accent);
+  color: #000;
+  border: none;
+}
+
+.ta-btn-primary:hover { background: var(--ta-accent2); }
+
+.ta-btn-red { color: var(--ta-red); }
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.animate-fade {
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: var(--ta-text3);
+  text-align: center;
+}
+
+.empty-icon {
+  font-size: 40px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+/* --- Vibrant & Animated Styles --- */
+
+@keyframes scan-line {
+  0% { top: 0%; opacity: 0; }
+  50% { opacity: 1; }
+  100% { top: 100%; opacity: 0; }
+}
+
+@keyframes brain-pulse {
+  0% { transform: scale(1); filter: drop-shadow(0 0 5px var(--ta-accent)); }
+  50% { transform: scale(1.1); filter: drop-shadow(0 0 15px var(--ta-accent)); }
+  100% { transform: scale(1); filter: drop-shadow(0 0 5px var(--ta-accent)); }
+}
+
+.ai-processing-box {
+  position: relative;
+  overflow: hidden;
+  background: var(--ta-bg3);
+  border-radius: 16px;
+  padding: 40px;
+  text-align: center;
+  border: 1px solid var(--ta-accent-bg);
+}
+
+.scan-line {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--ta-accent), transparent);
+  animation: scan-line 2s infinite linear;
+  box-shadow: 0 0 10px var(--ta-accent);
+}
+
+.brain-icon {
+  font-size: 48px;
+  color: var(--ta-accent);
+  animation: brain-pulse 1.5s infinite ease-in-out;
+  margin-bottom: 20px;
+}
+
+.vibrant-btn {
+  background: linear-gradient(135deg, var(--ta-accent), #a855f7);
+  color: white !important;
+  border: none !important;
+  padding: 12px 24px !important;
+  font-weight: 600 !important;
+  border-radius: 8px !important;
+  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.vibrant-btn:hover {
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.5);
+}
+
+.vibrant-btn:active {
+  transform: translateY(0) scale(0.95);
+}
+
+.time-selector {
+  display: flex;
+  background: var(--ta-bg3);
+  padding: 4px;
+  border-radius: 10px;
+  gap: 4px;
+  border: 1px solid var(--ta-border);
+}
+
+.time-opt {
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  transition: 0.2s;
+  color: var(--ta-text3);
+}
+
+.time-opt.active {
+  background: var(--ta-accent);
+  color: white;
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
+}

src/pages/TADashboard.jsx

@@ -0,0 +1,400 @@
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { 
+  FiAlertCircle, FiCheckCircle, FiMessageSquare, FiRefreshCw, 
+  FiTrash2, FiEdit, FiClock, FiUsers, FiFileText, FiCalendar, 
+  FiSettings, FiShare2, FiMoreVertical, FiTrendingUp, FiActivity, FiCpu, FiInfo, FiUploadCloud, FiSend, FiChevronRight 
+} from 'react-icons/fi';
+import taService from '../services/ta.service';
+import './TADashboard.css';
+
+const TADashboard = () => {
+  const { activeSpace } = useSelector((state) => state.app);
+  const [atRiskList, setAtRiskList] = useState([]);
+  const [summaryQueue, setSummaryQueue] = useState([]);
+  const [actionLogs, setActionLogs] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [activeTab, setActiveTab] = useState('at-risk');
+  const [aiContext, setAiContext] = useState(null);
+  const [uploadedFile, setUploadedFile] = useState(null);
+  
+  // AI Flow State
+  const [currentStep, setCurrentStep] = useState(1); 
+  const [aiPreview, setAiPreview] = useState(null);
+  const [sendTime, setSendTime] = useState('now');
+  const [scheduleDate, setScheduleDate] = useState('');
+
+  const fetchData = async () => {
+    if (!activeSpace) return;
+    setLoading(true);
+    try {
+      const [atRiskRes, queueRes, logsRes] = await Promise.allSettled([
+        taService.getAtRiskList(activeSpace),
+        taService.getSummaryQueue(activeSpace),
+        taService.getActionLogs(activeSpace)
+      ]);
+
+      if (atRiskRes.status === 'fulfilled') setAtRiskList(atRiskRes.value.data || []);
+      if (queueRes.status === 'fulfilled') setSummaryQueue(queueRes.value.data || []);
+      if (logsRes.status === 'fulfilled') setActionLogs(logsRes.value.data || []);
+    } catch (error) {
+      console.error('Failed to fetch TA Dashboard data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+    const interval = setInterval(fetchData, 60000);
+    return () => clearInterval(interval);
+  }, [activeSpace]);
+
+  const handleFileUpload = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    setUploading(true);
+    try {
+      const res = await taService.uploadSlide(activeSpace, file);
+      setUploadedFile(res.data);
+    } catch (error) {
+      console.error('Upload failed:', error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const startAiAnalysis = () => {
+    setCurrentStep(2);
+    setTimeout(() => {
+      setAiPreview({
+        content: `Tóm tắt buổi học hôm nay:\n\n1. Chúng ta đã học về React Hooks nâng cao (useMemo, useCallback).\n2. Cách tối ưu hiệu năng và các lỗi thường gặp khi sử dụng useEffect.\n3. Thảo luận về kiến trúc Atomic Design trong việc chia component.\n\n📌 Bài tập về nhà: Hoàn thiện Dashboard cho dự án cá nhân và nộp trước 23h ngày mai.`,
+        source: uploadedFile?.filename
+      });
+      setCurrentStep(3);
+    }, 3000);
+  };
+
+  const handleResolveAlert = async (id) => {
+    try {
+      await taService.resolveAlert(id, activeSpace);
+      await fetchData();
+    } catch (error) {
+      console.error('Failed to resolve alert:', error);
+    }
+  };
+
+  const handleApproveSummary = async () => {
+    try {
+      await fetchData();
+      setCurrentStep(1);
+      setAiPreview(null);
+      setUploadedFile(null);
+      alert(sendTime === 'now' ? 'Bản tóm tắt đã được đăng!' : `Đã hẹn lịch gửi vào lúc: ${scheduleDate}`);
+    } catch (error) {
+      console.error('Failed to approve summary:', error);
+    }
+  };
+
+  const handleScanAtRisk = async () => {
+    setLoading(true);
+    try {
+      await taService.scanAtRisk(activeSpace);
+      await fetchData();
+    } catch (error) {
+      console.error('Failed to scan at-risk:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGetAiContext = async (snapshotId) => {
+    try {
+      const res = await taService.getAtRiskContext(snapshotId, activeSpace);
+      setAiContext({ id: snapshotId, ...res.data });
+    } catch (error) {
+      console.error('Failed to get AI Context:', error);
+    }
+  };
+
+  const criticalCount = atRiskList.filter(s => s.level === 'critical').length;
+  const warningCount = atRiskList.filter(s => s.level === 'warning').length;
+
+  return (
+    <div className="ta-dashboard-container">
+      {/* Internal Sidebar */}
+      <aside className="ta-internal-sidebar">
+        <div className="sb-head">
+          <div className="sb-title">Quản lý TA</div>
+          <div className="sb-sub">{activeSpace?.substring(0, 8)}...</div>
+        </div>
+        <div className="sb-section">Chức năng chính</div>
+        <div className={`sb-item ${activeTab === 'at-risk' ? 'active' : ''}`} onClick={() => setActiveTab('at-risk')}>
+          <div className="sb-icon" style={{background: 'var(--ta-red-bg)', color: 'var(--ta-red)'}}><FiAlertCircle /></div>
+          <span>At-Risk Alert</span>
+          {atRiskList.length > 0 && <span className="ta-badge badge-red" style={{marginLeft: 'auto'}}>{atRiskList.length}</span>}
+        </div>
+        <div className={`sb-item ${activeTab === 'summary' ? 'active' : ''}`} onClick={() => setActiveTab('summary')}>
+          <div className="sb-icon" style={{background: 'var(--ta-accent-bg)', color: 'var(--ta-accent)'}}><FiFileText /></div>
+          <span>AI Summary Queue</span>
+          {summaryQueue.length > 0 && <span className="ta-badge badge-amber" style={{marginLeft: 'auto'}}>{summaryQueue.length}</span>}
+        </div>
+        <div className={`sb-item ${activeTab === 'logs' ? 'active' : ''}`} onClick={() => setActiveTab('logs')}>
+          <div className="sb-icon" style={{background: 'var(--ta-blue-bg)', color: 'var(--ta-blue)'}}><FiActivity /></div>
+          <span>Nhật ký hành động</span>
+        </div>
+        <div className="sb-section">Cài đặt</div>
+        <div className="sb-item">
+          <div className="sb-icon"><FiSettings /></div>
+          <span>Cấu hình AI</span>
+        </div>
+      </aside>
+
+      {/* Main Content Area */}
+      <div className="ta-main-content">
+        <header className="ta-topbar">
+          <div>
+            <div className="tb-title">
+              {activeTab === 'at-risk' ? 'Học viên cần quan tâm' : activeTab === 'summary' ? 'Quy trình Tóm tắt buổi học' : 'Nhật ký hoạt động TA'}
+            </div>
+            <div className="tb-sub">
+              {activeTab === 'at-risk' ? `${atRiskList.length} học viên cần hành động` : activeTab === 'summary' ? 'Tạo bản tóm tắt thông minh dựa trên tài liệu' : 'Lịch sử thao tác gần nhất'}
+            </div>
+          </div>
+          <div className="dashboard-actions" style={{display: 'flex', gap: '8px'}}>
+            <button className="ta-btn" style={{height: '38px'}} onClick={fetchData} disabled={loading}>
+              <FiRefreshCw className={loading ? 'spin' : ''} /> Làm mới
+            </button>
+            {activeTab === 'at-risk' && (
+              <button className="vibrant-btn" style={{height: '38px', padding: '0 20px', fontSize: '13px'}} onClick={handleScanAtRisk} disabled={loading}>
+                <FiTrendingUp /> Quét học viên
+              </button>
+            )}
+          </div>
+        </header>
+
+        <div className="ta-scroll-content">
+          {activeTab === 'at-risk' && (
+            <div className="metrics-grid animate-fade">
+              <div className="metric-card">
+                <div className="mc-label">Nguy cấp</div>
+                <div className="mc-val" style={{color: 'var(--ta-red)'}}>{criticalCount}</div>
+                <div className="mc-sub mc-dn">Cần xử lý ngay</div>
+              </div>
+              <div className="metric-card">
+                <div className="mc-label">Cảnh báo</div>
+                <div className="mc-val" style={{color: 'var(--ta-amber)'}}>{warningCount}</div>
+                <div className="mc-sub">Đang theo dõi</div>
+              </div>
+              <div className="metric-card">
+                <div className="mc-label">Tỷ lệ xử lý</div>
+                <div className="mc-val">92%</div>
+                <div className="mc-sub mc-up">↑ 4% tuần này</div>
+              </div>
+              <div className="metric-card">
+                <div className="mc-label">Avg Respond</div>
+                <div className="mc-val">15p</div>
+                <div className="mc-sub mc-up">Tốt hơn 20%</div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'at-risk' ? (
+            <div className="animate-fade">
+              <div className="ta-card">
+                <div className="card-head">
+                  <span style={{fontWeight: 600}}>🔴 Học viên có dấu hiệu rủi ro</span>
+                  <span className="ta-badge badge-red">{atRiskList.length}</span>
+                </div>
+                {atRiskList.length === 0 ? (
+                  <div className="empty-state">
+                    <FiCheckCircle className="empty-icon" style={{color: 'var(--ta-accent)'}} />
+                    <p>Lớp học hiện tại rất ổn định.</p>
+                  </div>
+                ) : (
+                  atRiskList.map(student => (
+                    <div key={student.id} style={{borderBottom: '1px solid var(--ta-border)'}}>
+                      <div className="ta-row">
+                        <img src={student.profiles?.avatar_url || 'https://ui-avatars.com/api/?name=' + (student.profiles?.display_name || 'Student')} className="student-av" alt={student.profiles?.display_name} />
+                        <div className="cell-info">
+                          <div className="cell-name">{student.profiles?.display_name || 'Học viên ẩn danh'}</div>
+                          <div className="cell-sub">{student.reason} · {new Date(student.created_at).toLocaleTimeString('vi-VN')}</div>
+                        </div>
+                        <div className={`ta-badge ${student.level === 'critical' ? 'badge-red' : 'badge-amber'}`}>
+                          {student.level === 'critical' ? 'Critical' : 'Warning'}
+                        </div>
+                        <button className="ta-btn" style={{borderColor: 'var(--ta-accent)', color: 'var(--ta-accent)'}} onClick={() => handleGetAiContext(student.id)}>
+                          <FiMessageSquare /> Nhắn tin
+                        </button>
+                        <button className="ta-btn" onClick={() => handleResolveAlert(student.id)}>
+                          <FiCheckCircle /> Đã xử lý
+                        </button>
+                      </div>
+                      {aiContext?.id === student.id && (
+                        <div style={{padding: '0 20px 16px 72px'}} className="animate-fade">
+                          <div style={{background: 'var(--ta-bg3)', padding: '16px', borderRadius: '12px', border: '1px solid var(--ta-accent-bg)', display: 'flex', alignItems: 'center', gap: '12px'}}>
+                            <div className="sb-icon" style={{background: 'var(--ta-accent-bg)', color: 'var(--ta-accent)', width: '32px', height: '32px'}}><FiCpu /></div>
+                            <div style={{flex: 1}}>
+                              <div style={{fontSize: '12px', fontWeight: 600, color: 'var(--ta-text)'}}>Đã chuẩn bị bộ Context cho học viên {student.profiles?.display_name}</div>
+                              <div style={{fontSize: '11px', color: 'var(--ta-text3)', marginTop: '2px'}}>Dữ liệu đã được lưu trữ an toàn. Agent sẽ tự động lấy thông tin này để soạn tin nhắn.</div>
+                            </div>
+                            <button className="ta-btn" style={{fontSize: '11px'}} onClick={() => setAiContext(null)}>Đóng</button>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          ) : activeTab === 'summary' ? (
+            <div className="animate-fade">
+              {/* Step Flow Header */}
+              <div className="ta-card" style={{marginBottom: '20px'}}>
+                <div style={{display: 'flex', borderBottom: '1px solid var(--ta-border)'}}>
+                  {['1. Tài liệu', '2. AI Phân tích', '3. Duyệt & Đăng'].map((step, idx) => (
+                    <div key={idx} style={{
+                      flex: 1, padding: '16px', textAlign: 'center', fontSize: '12px', 
+                      color: currentStep >= idx + 1 ? 'var(--ta-accent)' : 'var(--ta-text3)', 
+                      borderBottom: currentStep === idx + 1 ? '2px solid var(--ta-accent)' : 'none', 
+                      fontWeight: currentStep === idx + 1 ? 700 : 500, transition: '0.3s'
+                    }}>
+                      {currentStep > idx + 1 ? `✓ ${step}` : step}
+                    </div>
+                  ))}
+                </div>
+                
+                <div style={{padding: '30px'}}>
+                   {/* STEP 1: UPLOAD */}
+                   {currentStep === 1 && (
+                     <div className="animate-fade">
+                        <div 
+                          className="upload-zone" 
+                          style={{border: '2px dashed var(--ta-border2)', background: uploadedFile ? 'var(--ta-bg-success)' : 'var(--ta-bg2)', height: '180px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}
+                          onClick={() => document.getElementById('slide-upload').click()}
+                        >
+                           {uploading ? <FiRefreshCw className="spin" size={32} /> : 
+                            uploadedFile ? <FiCheckCircle size={32} style={{color: 'var(--ta-accent)'}} /> :
+                            <FiUploadCloud size={32} style={{color: 'var(--ta-accent)', marginBottom: '12px'}} />}
+                           
+                           <div style={{fontWeight: 600, fontSize: '15px', marginTop: '10px'}}>
+                             {uploadedFile ? uploadedFile.filename : 'Tải lên Slide bài giảng (PDF, IMG)'}
+                           </div>
+                           <div style={{fontSize: '12px', color: 'var(--ta-text3)', marginTop: '4px'}}>
+                             {uploadedFile ? `${(uploadedFile.size/1024).toFixed(1)} KB - Đã sẵn sàng` : 'Hệ thống sẽ kết hợp Slide và Chat Log để tóm tắt'}
+                           </div>
+                           <input type="file" style={{display: 'none'}} id="slide-upload" accept=".pdf,image/*" onChange={handleFileUpload} />
+                        </div>
+
+                        <div style={{marginTop: '30px', textAlign: 'center'}}>
+                          <button 
+                            className="vibrant-btn" 
+                            style={{width: '240px', height: '46px', fontSize: '14px'}}
+                            onClick={startAiAnalysis}
+                            disabled={!uploadedFile}
+                          >
+                            Bắt đầu Phân tích <FiChevronRight />
+                          </button>
+                        </div>
+                     </div>
+                   )}
+
+                   {/* STEP 2: PROCESSING */}
+                   {currentStep === 2 && (
+                     <div className="ai-processing-box animate-fade">
+                        <div className="scan-line"></div>
+                        <div className="brain-icon"><FiCpu /></div>
+                        <div style={{fontWeight: 700, fontSize: '18px', color: 'var(--ta-text)', marginBottom: '8px'}}>AI ĐANG TỔNG HỢP...</div>
+                        <div style={{fontSize: '13px', color: 'var(--ta-text3)', maxWidth: '400px', margin: '0 auto'}}>
+                          Đang đọc tài liệu {uploadedFile?.filename} và quét nội dung thảo luận trong lớp học để soạn bản thảo tóm tắt.
+                        </div>
+                     </div>
+                   )}
+
+                   {/* STEP 3: PREVIEW & SCHEDULE */}
+                   {currentStep === 3 && (
+                     <div className="animate-fade">
+                        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px'}}>
+                          <div style={{fontSize: '13px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--ta-accent)'}}>
+                            <FiCpu /> BẢN NHÁP TÓM TẮT THÔNG MINH
+                          </div>
+                          <div style={{fontSize: '11px', color: 'var(--ta-text3)'}}>Học liệu: {uploadedFile?.filename}</div>
+                        </div>
+                        
+                        <textarea 
+                          className="ta-textarea" 
+                          value={aiPreview.content}
+                          onChange={(e) => setAiPreview({...aiPreview, content: e.target.value})}
+                          style={{width: '100%', height: '180px', background: 'var(--ta-bg)', border: '1px solid var(--ta-border)', borderRadius: '12px', padding: '16px', fontSize: '14px', color: 'var(--ta-text2)', lineHeight: 1.6, outline: 'none'}}
+                        />
+                        
+                        <div style={{marginTop: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', background: 'var(--ta-bg2)', padding: '20px', borderRadius: '12px', gap: '20px'}}>
+                          <div style={{flex: 1}}>
+                            <div style={{fontSize: '11px', fontWeight: 700, color: 'var(--ta-text3)', marginBottom: '10px', textTransform: 'uppercase'}}>Lựa chọn thời gian gửi</div>
+                            <div className="time-selector" style={{width: 'fit-content'}}>
+                              <div className={`time-opt ${sendTime === 'now' ? 'active' : ''}`} onClick={() => setSendTime('now')}>
+                                <FiSend /> Gửi ngay
+                              </div>
+                              <div className={`time-opt ${sendTime === 'schedule' ? 'active' : ''}`} onClick={() => setSendTime('schedule')}>
+                                <FiClock /> Hẹn giờ
+                              </div>
+                            </div>
+                            
+                            {sendTime === 'schedule' && (
+                              <div className="animate-fade" style={{marginTop: '12px'}}>
+                                <input 
+                                  type="datetime-local" 
+                                  className="ta-input" 
+                                  style={{width: '200px', padding: '8px', borderRadius: '6px', border: '1px solid var(--ta-border)', background: 'var(--ta-bg)', color: 'var(--ta-text)'}}
+                                  value={scheduleDate}
+                                  onChange={(e) => setScheduleDate(e.target.value)}
+                                />
+                              </div>
+                            )}
+                          </div>
+                          
+                          <div style={{display: 'flex', gap: '10px', marginTop: '20px'}}>
+                            <button className="ta-btn" style={{height: '42px', padding: '0 20px'}} onClick={() => setCurrentStep(1)}>
+                              <FiRefreshCw /> Làm lại
+                            </button>
+                            <button className="vibrant-btn" style={{height: '42px', minWidth: '180px'}} onClick={handleApproveSummary}>
+                              <FiCheckCircle /> {sendTime === 'now' ? 'Duyệt & Đăng bài' : 'Xác nhận đặt lịch'}
+                            </button>
+                          </div>
+                        </div>
+                     </div>
+                   )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="animate-fade">
+              {/* Logs Tab */}
+              <div className="ta-card">
+                <div className="card-head"><span style={{fontWeight: 600}}>📜 Lịch sử hành động</span></div>
+                {actionLogs.length === 0 ? (
+                  <div className="empty-state"><p>Chưa có hành động nào.</p></div>
+                ) : (
+                  actionLogs.map(log => (
+                    <div key={log.id} className="ta-row">
+                      <div className="sb-icon" style={{background: 'var(--ta-bg4)'}}>{log.action_type === 'dismissed_alert' ? '✅' : log.action_type === 'upload_document' ? '📁' : '📝'}</div>
+                      <div className="cell-info">
+                        <div className="cell-name"><strong>{log.ta?.display_name || 'TA'}</strong> {log.action_type === 'dismissed_alert' ? 'đã xử lý cảnh báo cho' : log.action_type === 'upload_document' ? 'đã tải lên' : 'đã duyệt tóm tắt'}</div>
+                        <div className="cell-sub">{log.notes}</div>
+                      </div>
+                      <div style={{fontSize: '11px', color: 'var(--ta-text3)'}}>{new Date(log.created_at).toLocaleString('vi-VN')}</div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TADashboard;

src/store/slices/appSlice.js

@@ -54,6 +54,10 @@ const appSlice = createSlice({
     cancelCreateSpace: (state) => {
       state.activeView = "space";
     },
+    navigateToDashboard: (state) => {
+      state.activeView = "dashboard";
+      state.isSettings = false;
+    },
     // 🆕 App loading state reducers
     setAppLoading: (state, action) => {
       state.appLoading = action.payload;
@@ -84,6 +88,7 @@ export const {
   navigateToMessages,
   openCreateSpace,
   cancelCreateSpace,
+  navigateToDashboard,
   // 🆕 App loading exports
   setAppLoading,
   setAppLoadingPhase,