🎵 OPENMUSIC — Quản lý Trung tâm Nghệ thuật
Web quản lý Thời khóa biểu · Điểm danh · Tính lương giáo viên · Học phí học sinh cho
Trung tâm Nghệ thuật OPENMUSIC. Học theo (clone) dự án "Thời khóa biểu Giáo viên" và mở rộng thêm
điểm danh, tính số buổi, tính lương/học phí, thông báo nhắc lớp và thông báo kết thúc khóa.
Web tĩnh (HTML/CSS/JS thuần) + Supabase (Auth + Postgres + RLS). Tối ưu cho máy tính, máy tính bảng và điện thoại.
✨ Tính năng
- ✅ Đăng nhập / Đăng ký + Quên mật khẩu / Đặt lại mật khẩu qua email (giống dự án mẫu, dùng Supabase Auth).
- ✅ Thời khóa biểu tuần: lưới Thứ 2 → CN × Sáng/Chiều/Tối trên máy tính, tự chuyển danh sách theo ngày trên điện thoại; điều hướng tuần/tháng, "Tuần này", chọn ngày nhanh.
- ✅ Hôm nay & Điểm danh: nút tích từng học sinh Có mặt / Vắng, thể hiện trạng thái trực tiếp; điểm danh giáo viên (Có dạy / Nghỉ).
- ✅ Tính số buổi: số buổi học sinh đã học = số lần được điểm danh "có mặt"; số buổi giáo viên đã dạy = số lần điểm danh "có dạy".
- ✅ Tính lương giáo viên = số buổi đã dạy × lương mỗi buổi (lọc theo khoảng ngày / tháng).
- ✅ Tính học phí học sinh = số buổi đã học × học phí/buổi; xuất CSV.
- ✅ Thông báo kết thúc khóa theo từng học sinh (vd 12 buổi, 24 buổi): tự báo sắp kết thúc (còn ≤ 2 buổi) và đã kết thúc.
- ✅ Nhắc lớp học hôm nay trước 2 tiếng (tùy chỉnh số phút trong Cài đặt) bằng thanh nhắc + popup trình duyệt — để không bị lỡ lớp.
- ✅ Phân quyền:
- Giáo viên: chỉ xem lịch dạy của mình và điểm danh lớp của mình; không thấy lịch giáo viên khác, không thấy mục lương/học phí.
- Admin: toàn quyền — menu đầy đủ, thêm/sửa/xóa lịch, quản lý học sinh & giáo viên, tính lương, tính học phí.
- ✅ Giao diện tối / sáng, responsive web · tablet · điện thoại.
- ✅ Bảo mật bằng Row Level Security (RLS) ngay trong database.
- ✅ Chế độ DEMO: chưa cấu hình Supabase vẫn chạy & dùng thử ngay (dữ liệu lưu trên trình duyệt).
🚀 Chạy nhanh (DEMO — không cần Supabase)
Mở thử ngay không cần cài gì:
Khi chưa điền Supabase, web tự chạy chế độ DEMO với dữ liệu mẫu. Tài khoản đăng nhập thử:
Dữ liệu thử nghiệm chỉ lưu trên trình duyệt của bạn; thêm ?demo=1 để sử dụng riêng dữ liệu mẫu.
🔌 Kết nối Supabase (dùng thật)
- Tạo project tại https://supabase.com
- SQL Editor → New query → dán toàn bộ
supabase-setup.sql → Run.
- Mở
config.js, điền 2 giá trị (lấy ở Project Settings → Data API / API Keys):
window.APP_CONFIG = {
SUPABASE_URL: "https://xxxx.supabase.co", // Project URL (không kèm /rest/v1/)
SUPABASE_ANON_KEY: "eyJhbGciOi...", // anon / public key
};
- Tải lại web — app tự chuyển sang Supabase. Góc dưới menu sẽ hiện "● Đã kết nối Supabase".
anon key được phép công khai trên trình duyệt — bảo mật thật sự nằm ở RLS trong supabase-setup.sql.
👤 Tạo Admin
Mọi người đăng ký đều là giáo viên. Để cấp quyền Admin, sau khi tài khoản đã đăng ký, chạy (đổi email):
update public.profiles set role = 'admin'
where id = (select id from auth.users where email = '[email protected]');
🔑 Quên mật khẩu qua email — cấu hình
Tính năng "Quên mật khẩu" gửi email chứa liên kết đặt lại. Để liên kết mở đúng web:
- Supabase → Authentication → URL Configuration
- Site URL: địa chỉ web của bạn (vd
https://openmusic.vercel.app hoặc http://localhost:5500)
- Redirect URLs: thêm địa chỉ đó (vd
http://localhost:5500/**)
- (Tùy chọn) Authentication → Emails để Việt hóa nội dung email.
🧱 Mô hình dữ liệu
| Bảng | Vai trò |
|---|
profiles | Tài khoản đăng nhập + vai trò (teacher / admin). |
teachers | Danh sách giáo viên (roster). Có pay_per_session (lương mỗi buổi), user_id để gắn tài khoản. |
students | Học sinh + khóa học: total_sessions (số buổi của khóa), tuition_per_session (học phí/buổi), status. |
schedules | Buổi học theo ngày, gắn vào teachers. Có teacher_present (điểm danh giáo viên). |
attendance | Điểm danh học sinh từng buổi: present = null (chưa) / true (có mặt) / false (vắng); note = ghi chú lý do nghỉ (hiện trong PDF của học sinh). |
Cách tính:
- Buổi học sinh đã học = số dòng
attendance.present = true của em đó. Còn lại = total_sessions − đã học.
- Học phí thực thu = đã học ×
tuition_per_session.
- Buổi giáo viên đã dạy = số
schedules.teacher_present = true. Lương = đã dạy × pay_per_session.
Quyền (RLS)
| Hành động | Giáo viên | Admin |
|---|
| Xem lịch của mình | ✅ | ✅ (xem tất cả) |
| Xem lịch giáo viên khác | ❌ | ✅ |
| Thêm/xóa buổi học (xây TKB) | ❌ | ✅ |
| Điểm danh HS + GV trong lớp của mình | ✅ | ✅ |
| Quản lý học sinh / giáo viên | ❌ | ✅ |
| Tính lương / học phí | ❌ | ✅ |
🗂️ File trong dự án
| File | Vai trò |
|---|
index.html | Cấu trúc trang (auth + sidebar menu + các view + modal). |
styles.css | Giao diện (theme tối/sáng, glass, responsive web/tablet/mobile). |
backend.js | Lớp truy cập dữ liệu: tự chọn Supabase hoặc DEMO (localStorage). |
app.js | Logic: auth, router, điểm danh, tính lương/học phí, thông báo, phân quyền. |
config.js | Bạn điền URL + anon key Supabase. |
supabase-setup.sql | SQL cài đặt đầy đủ (bảng + trigger + RLS). |
☁️ Đưa lên mạng
Web tĩnh, deploy dễ: kéo-thả thư mục lên Netlify (https://app.netlify.com/drop), Vercel hoặc Cloudflare Pages.
Nhớ cập nhật Site URL / Redirect URLs trong Supabase theo tên miền mới (mục Quên mật khẩu ở trên).
Cập nhật giao diện và kiểm tra (28/10/2026)
- Giao diện kính mờ màu xanh ngọc, thanh tiêu đề gọn và thanh điều hướng dưới cho iPhone.
- Tìm kiếm bằng popup trên thanh tiêu đề; giao diện sáng/tối nằm trong Quản lý.
- Học phí riêng hoặc giảm theo %, ô tiền định dạng dấu chấm theo nhóm ba chữ số.
- Lương có thẻ trên điện thoại và bảng tổng quan trong Xem tất cả; báo cáo thu/lương gọn trong một thẻ.
- Tiền thu lọc theo ngày Việt Nam. Truy vấn phân trang để không bỏ các dòng sau mốc 1.000.
- Supabase JS 2.118.0 được lưu tại
vendor/ kèm giấy phép, không phụ thuộc CDN khi mở lại PWA.
Chạy kiểm tra: npm ci, npm run check, npm test. GitHub Actions chạy cùng bộ kiểm tra khi push/PR.
Database hiện có: áp dụng supabase/migrations/20261028042601_courses_and_profile_hardening.sql
(bản tương đương tại supabase-migration-6.sql) sau các migration trước đó. Script chạy trong transaction,
không xóa dữ liệu, bổ sung khóa học/vắng có phép, ngăn tài khoản tự nâng vai trò và giới hạn dữ liệu giáo viên được đọc.
Không chạy lại setup cũ sau migration này vì các policy cũ sẽ mở lại quyền đọc toàn bộ.
MIGRATION_MODE trong app.js hiện vẫn bật theo luồng nhập dữ liệu cũ; giáo viên được điểm danh bù quá khứ.
Tắt khi trung tâm kết thúc nhập dữ liệu. Đây là giới hạn giao diện, không thay thế RLS trên server.
Vùng an toàn iPhone (cập nhật tiếp 28/10/2026)
Màu theme được áp dụng trong head trước khi tải ứng dụng, đồng bộ màu nền gốc, header và theme-color.
Header có nền đồng màu để không lộ nội dung cuộn dưới đồng hồ; vùng tai thỏ, Dynamic Island,
home indicator và cạnh màn hình ngang dùng env(safe-area-inset-*), không suy đoán theo tên máy.
Giữ status bar style=default để hệ thống chọn chữ phù hợp với theme. Service worker đổi cache sang om-v3-iphone-chrome.
Đã đạt 28 kiểm thử, gồm 5 trường hợp màu theme khi khởi động. Chưa xác minh trên iPhone vật lý.
Sau deploy, đóng/mở lại PWA; nếu màu thanh trạng thái vẫn giữ bản cài cũ, thêm lại biểu tượng từ Safari.
Tốc độ mở ứng dụng
Bỏ yêu cầu font Google khỏi đường tải ban đầu (iPhone dùng font hệ thống).
Các truy vấn dữ liệu độc lập chạy trong cùng một đợt thay vì chờ hai đợt nối tiếp;
đếm có mặt tái sử dụng dữ liệu điểm danh, không truy vấn lại bảng attendance.
Callback xác thực được chuyển sang lượt event loop kế tiếp trước khi tải hồ sơ,
tránh giữ khóa Supabase Auth khi bắt đầu truy vấn. Hiện trạng thái đang tải thay vì vùng lịch trống.
Bộ kiểm thử: 30/30 đạt. Chưa đo thời gian tải trên mạng/iPhone thực tế của người dùng.
Khắc phục Safari tải lại liên tục
Ảnh lỗi thiết bị cho thấy trang bị Safari dừng sau nhiều lần tải lại; chưa có crash log thiết bị để xác định nguyên nhân.
Đã áp dụng đường hiển thị nhẹ cho màn hình <=900px và thiết bị cảm ứng: bỏ filter/backdrop-filter trên các lớp lồng nhau,
bỏ mask toàn màn hình và orb blur, dùng SVG trực tiếp cho khóa sol. Vẫn giữ nền ngọc, góc bo, bề mặt trong và viền sáng.
Không có location.reload/controllerchange reload tự động trong ứng dụng. Cache mới om-v5-mobile-stability.
Cần xác nhận lại trên iPhone thật; kiểm thử DOM không phát hiện được sự cố GPU/WebKit.
Khôi phục kính và đo tải dữ liệu
Đã khôi phục blur/mask như trước theo yêu cầu người dùng; bản giảm tải không chứng minh được nguyên nhân crash.
Mỗi truy vấn khởi động ghi console với tiền tố [OPENMUSIC load], tên nhóm dữ liệu và thời gian (không ghi tài khoản/token/nội dung dữ liệu).
Quá 15 giây không phản hồi sẽ hiện lỗi có tên nhóm dữ liệu thay vì treo ở Đang tải lịch học mãi.
Đây là công cụ khoanh vùng lỗi, không phải xác nhận nguyên nhân đã được sửa.
Đã đạt 31 kiểm thử. Đo HTTP từ máy phát triển: HTML 433ms, app.js 59ms, CSS 55ms, Supabase JS 343ms;
các số đo không đại diện cho truy vấn đăng nhập hay tốc độ iPhone.
Web Push khi đóng ứng dụng
Code hỗ trợ iOS Home Screen Web Push qua Supabase Edge Function web-push.
Trong app: nút chuông → Bật thông báo thiết bị → Gửi thử. Thiết bị phải cấp quyền thông báo.
Giáo viên nhận nhắc lớp của mình; admin nhận nhắc toàn bộ lớp. Thời điểm theo Asia/Ho_Chi_Minh;
lead_minutes lưu riêng từng thiết bị, từ 0 đến 1440 phút. Push có thể trễ do mạng, Focus hoặc iOS.
Kích hoạt máy chủ một lần (bắt buộc)
Code trên Vercel không tự tạo Edge Function và cron. Cần đăng nhập CLI tài khoản sở hữu dự án:
cd 'D:\chi Quyen'
npx --yes supabase login --agent no --output-format text
.\scripts\enable-web-push.ps1
Script kích hoạt đúng dự án ivilqvnljoucbsxzdvwf, chạy migration push, tạo khóa VAPID cục bộ,
đưa secrets lên Supabase, deploy function bằng Management API và tạo lịch kiểm tra mỗi phút qua pg_cron/pg_net.
Khóa riêng ở .env.push, SQL kích hoạt chứa cron secret ở supabase/push-activate.local.sql:
cả hai đều bị gitignore. Không gửi khóa/token vào chat hoặc commit. Giữ nguyên .env.push khi deploy lại,
vì đổi VAPID key sẽ yêu cầu các thiết bị đăng ký nhận lại.
Sau kích hoạt: mở app từ màn hình chính iPhone, bấm chuông → bật thông báo → Cho phép → Gửi thử.
Thử một buổi học của đúng giáo viên, đặt nhắc trước 5 phút, đóng app và đợi thời điểm gửi để xác nhận đầu cuối.
Không thể xác nhận gửi thành công chỉ bằng kết quả unit test.
Quyền và độ tin cậy
Bảng subscriptions chỉ đọc bởi chủ thiết bị; ghi qua function kiểm tra JWT bằng Auth.getUser.
Cron có secret riêng trong Vault. Endpoint gửi phải thuộc các nhà cung cấp push đã cho phép;
không nhận URL tùy ý. Claim delivery dùng khóa duy nhất và lease để giảm gửi trùng, tự xóa endpoint hết hạn (404/410).
Push không bảo đảm đúng từng giây hay exactly-once: lỗi kết nối sau khi nhà cung cấp nhận có thể gây gửi lại;
tag cố định giúp hệ điều hành gộp thông báo. Mỗi lượt gửi tối đa 50 thông báo, tối đa 5 yêu cầu song song.
Nhắc lịch bắt kịp chậm dưới 5 phút; gián đoạn lâu hơn có thể bỏ lỡ thông báo.
Đăng xuất chủ động gỡ đăng ký trên thiết bị, nếu máy chủ không liên lạc được sẽ báo cần tắt quyền trên iPhone.
Kiểm thử: npm test (36 trường hợp) và Deno crypto test:
npx --yes deno check --config supabase/functions/web-push/deno.json supabase/functions/web-push/index.ts
npx --yes deno test --allow-env=ECE_KEYLOG,NODE_DEBUG --config supabase/functions/web-push/deno.json supabase/functions/web-push/crypto_test.ts
