phuocntb/rikkei_simple_care
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix tam
All checks were successful
Deploy on Master Change / deploy (push) Successful in 1m7s
Details

Browse Source
This commit is contained in:
Nguyễn Phước
2026-07-06 11:04:12 +07:00
parent f5dce38e11
commit 6502531ad7
1 changed files with 139 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
management/src/components/AttendancePanel.tsx
View File

@@ -42,6 +42,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
const [isCollapsed, setIsCollapsed] = useState(false);
const [leaveRequests, setLeaveRequests] = useState<LeaveRequestItem[]>([]);
const [loadingLeave, setLoadingLeave] = useState(false);
const [showLeaveModal, setShowLeaveModal] = useState(false);
const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
const scrollTop = e.currentTarget.scrollTop;
@@ -273,8 +274,33 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
<button type="button" className="btn btn-secondary" onClick={() => loadAttendance(false)} disabled={loading}>
Tải lại
</button>
{courseId && (
<button
type="button"
className="btn btn-secondary"
onClick={() => setShowLeaveModal(true)}
style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
>
✉️ Đơn phép
{leaveRequests.length > 0 && (
<span
className="badge"
style={{
background: leaveRequests.some(r => r.status === 'Đang chờ') ? 'var(--accent)' : 'var(--text-secondary)',
color: '#fff',
fontSize: '0.72rem',
padding: '0.1rem 0.35rem',
borderRadius: '10px',
fontWeight: 700
}}
>
{leaveRequests.length}
</span>
)}
</button>
)}
<button type="button" className="btn btn-primary" onClick={handlePushQLDT} disabled={pushing || rows.length === 0}>
{pushing ? 'Đang đẩy...' : 'Đẩy QLĐT'}
{pushing ? 'Đang tải...' : 'Đẩy QLĐT'}
</button>
</div>
@@ -342,73 +368,68 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
</div>
</div>
{/* Leave Requests Approval Section */}
{courseId && (
<div
className="leave-requests-section"
style={{
margin: '10px 0',
padding: '1rem',
background: 'rgba(255, 255, 255, 0.8)',
backdropFilter: 'blur(8px)',
border: '1px solid var(--border-color)',
borderRadius: '12px',
boxShadow: 'var(--shadow-sm)'
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
<h4 style={{ margin: 0, fontSize: '0.95rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--text-primary)' }}>
<span>✉️ Đơn xin nghỉ phép trong ca</span>
<span className="badge" style={{ background: 'var(--accent-light)', color: 'var(--accent)', fontSize: '0.75rem', padding: '0.15rem 0.4rem', borderRadius: '10px' }}>
{leaveRequests.length} đơn
</span>
</h4>
{/* Leave Requests Approval Modal */}
{showLeaveModal && courseId && (
<div className="modal-overlay" onClick={() => setShowLeaveModal(false)}>
<div className="modal-container" style={{ maxWidth: '680px', width: '95%', display: 'flex', flexDirection: 'column' }} onClick={e => e.stopPropagation()}>
<div className="modal-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
<h3 className="modal-title" style={{ margin: 0 }}>✉️ Đơn xin nghỉ phép trong ca</h3>
<p style={{ margin: '4px 0 0 0', color: 'var(--text-secondary)', fontSize: '0.8rem' }}>
Ca {period} ngày {date} - Giao diện duyệt đơn xin nghỉ từ cổng QLĐT portal.
</p>
</div>
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<button
type="button"
className="btn btn-secondary btn-sm"
onClick={loadLeaveRequests}
disabled={loadingLeave}
style={{ padding: '0.2rem 0.5rem', fontSize: '0.75rem' }}
style={{ padding: '0.3rem 0.6rem', fontSize: '0.78rem' }}
>
{loadingLeave ? 'Đang tải...' : '🔄 Làm mới đơn phép'}
{loadingLeave ? 'Đang tải...' : '🔄 Làm mới'}
</button>
<button type="button" className="btn btn-secondary btn-sm" onClick={() => setShowLeaveModal(false)}>
Đóng
</button>
</div>
</div>
<div className="modal-body" style={{ padding: '1rem', overflowY: 'auto', maxHeight: '60vh', display: 'flex', flexDirection: 'column', gap: '10px' }}>
{loadingLeave ? (
<div style={{ display: 'flex', justifyContent: 'center', padding: '1rem 0' }}>
<div className="sync-spinner" style={{ width: 20, height: 20 }} />
<div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}>
<div className="sync-spinner" style={{ width: 28, height: 28 }} />
</div>
) : leaveRequests.length === 0 ? (
<p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '0.8rem', fontStyle: 'italic' }}>
<div style={{ textAlign: 'center', padding: '2rem 0', color: 'var(--text-muted)', fontSize: '0.85rem', fontStyle: 'italic' }}>
Không có đơn xin nghỉ phép nào cho ca học này trong ngày hôm nay.
</p>
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxHeight: '250px', overflowY: 'auto', paddingRight: '4px' }}>
{leaveRequests.map((req) => (
leaveRequests.map((req) => (
<div
key={req.id}
style={{
display: 'flex',
flexDirection: 'column',
gap: '6px',
padding: '0.75rem',
gap: '8px',
padding: '0.85rem',
border: '1px solid var(--border-color)',
borderRadius: '8px',
backgroundColor: '#ffffff'
backgroundColor: '#ffffff',
boxShadow: 'var(--shadow-sm)'
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '8px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<div style={{ fontWeight: 600, fontSize: '0.85rem' }}>{req.student.fullName}</div>
<code style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>{req.student.studentCode}</code>
<div style={{ fontWeight: 600, fontSize: '0.9rem' }}>{req.student.fullName}</div>
<code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>{req.student.studentCode}</code>
<span
className="badge"
style={{
fontSize: '0.7rem',
fontSize: '0.72rem',
fontWeight: 600,
backgroundColor: req.status === 'Đang chờ' ? '#fef3c7' : req.status === 'Phê duyệt' ? '#d1fae5' : '#fee2e2',
color: req.status === 'Đang chờ' ? '#b45309' : req.status === 'Phê duyệt' ? '#065f46' : '#991b1b',
padding: '0.1rem 0.4rem',
padding: '0.15rem 0.45rem',
borderRadius: '4px'
}}
>
@@ -421,7 +442,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
<button
type="button"
className="btn btn-primary btn-sm"
style={{ padding: '0.2rem 0.5rem', fontSize: '0.75rem', backgroundColor: 'var(--success)', borderColor: 'var(--success)' }}
style={{ padding: '0.25rem 0.65rem', fontSize: '0.78rem', backgroundColor: 'var(--success)', borderColor: 'var(--success)' }}
onClick={() => {
if (confirm(`Phê duyệt đơn xin nghỉ phép của ${req.student.fullName}? Trạng thái điểm danh ca sẽ chuyển thành Nghỉ có phép.`)) {
handleUpdateLeaveStatus(req.id, 'Phê duyệt', req.student.id);
@@ -433,7 +454,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
<button
type="button"
className="btn btn-secondary btn-sm text-danger"
style={{ padding: '0.2rem 0.5rem', fontSize: '0.75rem', borderColor: '#fca5a5' }}
style={{ padding: '0.25rem 0.65rem', fontSize: '0.78rem', borderColor: '#fca5a5' }}
onClick={() => {
if (confirm(`Từ chối đơn xin nghỉ phép của ${req.student.fullName}?`)) {
handleUpdateLeaveStatus(req.id, 'Từ chối', req.student.id);
@@ -446,7 +467,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
)}
</div>
<div style={{ fontSize: '0.8rem', color: 'var(--text-primary)', background: '#f9fafb', padding: '6px 8px', borderRadius: '4px', borderLeft: '3px solid #cbd5e1' }}>
<div style={{ fontSize: '0.82rem', color: 'var(--text-primary)', background: '#f9fafb', padding: '8px 10px', borderRadius: '4px', borderLeft: '4px solid #cbd5e1', lineHeight: '1.4' }}>
<strong>Lý do nghỉ:</strong> {req.note || 'Không có ghi chú'}
</div>
@@ -456,17 +477,18 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
href={req.reasonImage}
target="_blank"
rel="noopener noreferrer"
style={{ fontSize: '0.72rem', color: 'var(--accent)', textDecoration: 'underline', display: 'flex', alignItems: 'center', gap: '3px' }}
style={{ fontSize: '0.75rem', color: 'var(--accent)', textDecoration: 'underline', display: 'inline-flex', alignItems: 'center', gap: '4px', fontWeight: 500 }}
>
🖼️ Xem ảnh minh chứng phép
</a>
</div>
)}
</div>
))}
</div>
))
)}
</div>
</div>
</div>
)}
{selectedStudentRkIds.length > 0 && (