add rescide

2026-07-29 12:32:01 +07:00
parent 3b80550c76
commit 42172db9f4
6 changed files with 445 additions and 2 deletions
--- a/management/src/components/RescideAnnouncePopup.tsx
+++ b/management/src/components/RescideAnnouncePopup.tsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import { useAuth } from '../auth/AuthContext';
+import {
+  isRescidePopupHidden,
+  RESCIDE_DEFAULT_DOWNLOADS,
+  RESCIDE_FEATURES,
+  setRescidePopupHidden,
+} from '../rescide';
+import { navigate } from '../navigation';
+
+type Props = {
+  /** Khi true, không hiện popup (ví dụ đang ở workspace lớp/thi). */
+  disabled?: boolean;
+};
+
+export const RescideAnnouncePopup: React.FC<Props> = ({ disabled }) => {
+  const { staff } = useAuth();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (disabled || !staff?.email) {
+      setOpen(false);
+      return;
+    }
+    setOpen(!isRescidePopupHidden(staff.email));
+  }, [staff?.email, disabled]);
+
+  if (!open || !staff?.email) return null;
+
+  const dismissOnce = () => setOpen(false);
+
+  const dismissForever = () => {
+    setRescidePopupHidden(staff.email, true);
+    setOpen(false);
+  };
+
+  const goTab = () => {
+    setOpen(false);
+    navigate('rescide');
+  };
+
+  return (
+    <div className="modal-overlay" style={{ zIndex: 1200 }} onClick={dismissOnce}>
+      <div
+        className="modal-container"
+        style={{ maxWidth: 520, width: '92%' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="modal-header" style={{ borderBottom: '1px solid var(--border-light)' }}>
+          <h2 className="modal-title" style={{ margin: 0 }}>
+            Thông báo: RESCIDE IDE
+          </h2>
+          <button type="button" className="modal-close-btn" aria-label="Đóng" onClick={dismissOnce}>
+            ×
+          </button>
+        </div>
+        <div className="modal-body" style={{ padding: '1.25rem 1.5rem' }}>
+          <p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: 1.6, marginBottom: '1rem' }}>
+            <strong style={{ color: 'var(--text-primary)' }}>RESCIDE</strong> — IDE thi thực hành đang mở test thử để
+            đánh giá và cải thiện chức năng. Mục đích: môi trường IDE chuyên cho kỳ thi thực hành, chống gian lận cùng
+            RAIA DESKTOP.
+          </p>
+          <ul
+            style={{
+              margin: '0 0 1.25rem',
+              paddingLeft: '1.15rem',
+              fontSize: '0.875rem',
+              color: 'var(--text-secondary)',
+              lineHeight: 1.65,
+            }}
+          >
+            {RESCIDE_FEATURES.map((f) => (
+              <li key={f} style={{ marginBottom: '0.35rem' }}>
+                {f}
+              </li>
+            ))}
+          </ul>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '0.25rem' }}>
+            {RESCIDE_DEFAULT_DOWNLOADS.map((d) => (
+              <a
+                key={d.downloadUrl}
+                href={d.downloadUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn btn-secondary"
+                style={{ justifyContent: 'space-between', textDecoration: 'none', width: '100%' }}
+              >
+                <span>{d.name}</span>
+                <span style={{ fontWeight: 700, color: 'var(--accent)' }}>Tải</span>
+              </a>
+            ))}
+          </div>
+        </div>
+        <div
+          className="modal-footer"
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '0.5rem',
+            justifyContent: 'flex-end',
+            borderTop: '1px solid var(--border-light)',
+            padding: '1rem 1.5rem',
+          }}
+        >
+          <button type="button" className="btn btn-secondary" onClick={dismissForever}>
+            Ẩn với tài khoản này
+          </button>
+          <button type="button" className="btn btn-secondary" onClick={goTab}>
+            Xem chi tiết
+          </button>
+          <button type="button" className="btn btn-primary" onClick={dismissOnce}>
+            Đã hiểu
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};