core v1

management/src/components/DashboardTab.tsx

@@ -27,14 +27,17 @@ export const DashboardTab: React.FC<DashboardTabProps> = ({ onNavigate }) => {
   }, []);
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-      <div className="page-header">
-        <div className="page-title">
-          <h1>Tổng Quan Hệ Thống</h1>
-          <p>Giám sát đồng bộ và quản lý lớp học, sinh viên từ hệ thống chính</p>
+    <div className="tab-page">
+      <div className="tab-page-toolbar">
+        <div className="page-header">
+          <div className="page-title">
+            <h1>Tổng Quan Hệ Thống</h1>
+            <p>Giám sát đồng bộ và quản lý lớp học, sinh viên từ hệ thống chính</p>
+          </div>
         </div>
       </div>
 
+      <div className="tab-page-body tab-page-scroll">
       {loading && (
         <div className="empty-state">
           <div className="sync-spinner" style={{ width: '40px', height: '40px', borderWidth: '3px' }}></div>
@@ -65,7 +68,7 @@ export const DashboardTab: React.FC<DashboardTabProps> = ({ onNavigate }) => {
                 <div className="stat-label">Lớp đang giảng dạy</div>
                 <div className="stat-value" style={{ color: 'var(--success)' }}>{stats.activeClasses}</div>
               </div>
-              <div className="stat-icon" style={{ color: 'var(--success)' }}>🟢</div>
+              <div className="stat-icon success">✓</div>
             </div>
 
             <div className="stat-card" onClick={() => onNavigate('students')} style={{ cursor: 'pointer' }}>
@@ -77,61 +80,44 @@ export const DashboardTab: React.FC<DashboardTabProps> = ({ onNavigate }) => {
             </div>
           </div>
 
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
-            gap: '1.5rem',
-            marginTop: '1rem'
-          }}>
-            <div style={{
-              backgroundColor: 'var(--bg-card)',
-              border: '1px solid var(--border-color)',
-              padding: '2rem',
-              borderRadius: '18px',
-              backdropFilter: 'blur(10px)'
-            }}>
-              <h2 style={{ marginBottom: '1rem', color: 'white', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                🚀 Khởi động nhanh
-              </h2>
-              <p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', lineHeight: '1.6', marginBottom: '1.5rem' }}>
-                Chào mừng bạn đến với trang quản trị <b>Simple Care</b>. 
-                Hệ thống hỗ trợ đồng bộ hóa thông tin tự động từ cổng đào tạo chính (QLĐT), giúp lưu trữ, cập nhật trạng thái lớp học và danh sách sinh viên nội bộ mà không lo ảnh hưởng đến dữ liệu hiện có.
+          <div className="content-grid-2">
+            <div className="content-card">
+              <h2>Khởi động nhanh</h2>
+              <p>
+                Chào mừng bạn đến với trang quản trị <strong>Simple Care</strong>.
+                Hệ thống hỗ trợ đồng bộ hóa thông tin tự động từ cổng đào tạo chính (QLĐT), giúp lưu trữ, cập nhật trạng thái lớp học và danh sách sinh viên nội bộ.
               </p>
-              <div style={{ display: 'flex', gap: '1rem' }}>
+              <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
                 <button className="btn btn-primary" onClick={() => onNavigate('classes')}>
-                  Quản lý Lớp học
+                  Quản lý lớp học
                 </button>
                 <button className="btn btn-secondary" onClick={() => onNavigate('students')}>
-                  Danh sách Sinh viên
+                  Danh sách sinh viên
                 </button>
               </div>
             </div>
 
-            <div style={{
-              backgroundColor: 'var(--bg-card)',
-              border: '1px solid var(--border-color)',
-              padding: '2rem',
-              borderRadius: '18px',
-              backdropFilter: 'blur(10px)'
-            }}>
-              <h2 style={{ marginBottom: '1rem', color: 'white' }}>📋 Quy trình hoạt động</h2>
+            <div className="content-card">
+              <h2>Quy trình hoạt động</h2>
               <ul style={{
                 color: 'var(--text-secondary)',
-                fontSize: '0.95rem',
-                lineHeight: '1.8',
-                paddingLeft: '1.25rem',
+                fontSize: '0.875rem',
+                lineHeight: 1.75,
+                paddingLeft: '1.15rem',
                 display: 'flex',
                 flexDirection: 'column',
-                gap: '0.5rem'
+                gap: '0.5rem',
+                margin: 0
               }}>
-                <li><b>Đồng bộ Lớp học:</b> Tải toàn bộ danh sách lớp học và các môn học tương ứng. Đồng thời kéo thông tin sinh viên thuộc từng lớp thông qua bảng kết quả lớp học.</li>
-                <li><b>Quản lý Lớp:</b> Lọc danh sách lớp theo Phân hệ (System ID), Tìm kiếm tên hoặc mã lớp và Bật/Tắt cờ <b>Đang học</b>.</li>
-                <li><b>Đồng bộ Sinh viên:</b> Thực hiện kéo toàn bộ sinh viên trên hệ thống chính (kèm thông tin liên hệ, hệ học) lưu trữ vào Database phục vụ cho học tập và thi cử.</li>
+                <li><strong>Đồng bộ lớp học:</strong> Tải danh sách lớp và môn học, kéo thông tin sinh viên từng lớp qua bảng kết quả.</li>
+                <li><strong>Quản lý lớp:</strong> Lọc theo phân hệ, tìm kiếm tên/mã lớp và bật/tắt cờ <strong>Đang học</strong>.</li>
+                <li><strong>Đồng bộ sinh viên:</strong> Kéo toàn bộ sinh viên từ hệ thống chính (kèm thông tin liên hệ, hệ học) vào database nội bộ.</li>
               </ul>
             </div>
           </div>
         </>
       )}
+      </div>
     </div>
   );
 };