TroFlow – Website quản lý nhà trọ ReactJS + Supabase
TroFlow là phần mềm quản lý nhà trọ trên nền web dành cho chủ trọ quy mô 5–50 phòng. Thay thế hoàn toàn sổ tay và Excel: quản lý phòng, khách thuê, hợp đồng, ghi điện nước, lập hóa đơn hàng loạt chỉ với 1 nút bấm, thu tiền, theo dõi công nợ, chi phí, sự cố và báo cáo lãi lỗ. Dùng tốt trên máy tính, máy tính bảng và điện thoại.
Mã nguồn hoàn chỉnh, giao diện hiện đại, code sạch chia theo module, database cài đặt bằng 1 file SQL duy nhất, có sẵn dữ liệu demo để trình diễn ngay.
⭐ Điểm nổi bật
-
Tính tiền tự động, chính xác: tiền phòng (tự tính theo ngày nếu khách vào giữa tháng), điện, nước, dịch vụ (wifi, rác, giữ xe…) được tính ngay trong database.
-
Không bỏ sót công nợ: cảnh báo hóa đơn quá hạn, phân tích tuổi nợ, nhắc hợp đồng sắp hết hạn trước 30 ngày.
-
Phân quyền Chủ trọ / Nhân viên: nhân viên ghi điện nước, lập hóa đơn, thu tiền nhưng không xem được doanh thu, chi phí.
-
Bảo mật nhiều lớp: Row Level Security trên cả 21 bảng, ảnh CCCD lưu riêng tư, mỗi chủ trọ chỉ thấy dữ liệu của mình (dùng chung 1 hệ thống cho nhiều chủ trọ được).
-
Chi phí vận hành gần như 0đ: chạy tốt trên gói miễn phí của Supabase và Vercel / Netlify.
📦 13 module chức năng
-
Tổng quan (Dashboard): 10 KPI (phòng, khách, doanh thu, chi phí, lợi nhuận, công nợ…), biểu đồ doanh thu 6/12 tháng, công suất phòng, tình trạng hóa đơn, tuổi nợ, cảnh báo, hoạt động gần đây.
-
Khu trọ: quản lý nhiều khu trọ trên 1 tài khoản, bảng giá dịch vụ riêng từng khu, thông tin chuyển khoản in trên hóa đơn.
-
Phòng: xem dạng thẻ / bảng, lọc theo trạng thái, tầng, giá; ảnh phòng, lịch sử hợp đồng, lịch sử điện nước.
-
Khách thuê: hồ sơ đầy đủ, ảnh CCCD lưu riêng tư (che số trong danh sách), lịch sử lưu trú.
-
Hợp đồng: wizard tạo hợp đồng 7 bước, người ở cùng, dịch vụ riêng; kích hoạt / gia hạn / kết thúc / hủy; theo dõi tiền cọc, hoàn cọc; in hợp đồng.
-
Điện & nước: bảng nhập nhanh cả khu theo tháng, chỉ số cũ tự điền, chặn nhập sai, tự khóa khi đã lập hóa đơn.
-
Hóa đơn: lập hàng loạt theo tháng, thêm khoản thu / giảm trừ, in hóa đơn có thông tin chuyển khoản, soạn sẵn tin nhắn nhắc thu tiền.
-
Thanh toán: thu nhiều lần, chặn thu vượt, tiền mặt / chuyển khoản / ví điện tử, đính kèm chứng từ.
-
Chi phí: theo danh mục, đính kèm chứng từ, biểu đồ chi phí.
-
Sự cố / bảo trì: danh sách và bảng Kanban, mức ưu tiên, phân công người xử lý, ảnh đính kèm.
-
Báo cáo: doanh thu, công nợ, lấp đầy, điện nước, hợp đồng; lọc tháng / quý / năm; xuất CSV mở bằng Excel.
-
Nhân viên & phân quyền: mời nhân viên vào từng khu trọ, ma trận quyền rõ ràng.
-
Tiện ích: thông báo realtime, tìm kiếm nhanh Ctrl + K, giao diện sáng / tối, nhật ký hoạt động, đăng ký / quên mật khẩu.
🛠 Công nghệ sử dụng
-
Frontend: React 18, TypeScript, Vite 6, Tailwind CSS v4, Radix UI (phong cách shadcn/ui), TanStack Query, React Hook Form + Zod, Recharts.
-
Backend: Supabase – PostgreSQL 17, Auth, Storage, Realtime. Nghiệp vụ tài chính viết bằng hàm PostgreSQL chạy trong transaction, có khóa dòng chống ghi trùng.
-
Hosting: Vercel hoặc Netlify (đã cấu hình sẵn).
🎁 Bạn nhận được
-
Toàn bộ mã nguồn frontend (React + TypeScript).
-
File database duy nhất supabase/setup.sql: 21 bảng, ràng buộc, phân quyền, hàm nghiệp vụ, 7 bucket lưu file – có công tắc bật / tắt dữ liệu demo.
-
Dữ liệu demo: 3 tài khoản, 2 khu trọ, 6 tháng hóa đơn / thanh toán / điện nước.
-
Bộ kiểm thử: unit test, 36 kiểm tra nghiệp vụ & phân quyền bằng SQL, kịch bản kiểm thử trên trình duyệt.
-
Tài liệu hướng dẫn cài đặt chi tiết dạng trang web (docs/huong-dan-su-dung.html).
-
Mẫu in hóa đơn và hợp đồng thuê phòng.
🔑 Tài khoản demo
Mật khẩu chung: TroFlow@2026
-
owner@troflow.vn – Chủ trọ (xem toàn bộ tính năng)
-
staff@troflow.vn – Nhân viên (xem giới hạn quyền)
💻 Yêu cầu
-
Node.js 20 trở lên.
-
Tài khoản Supabase (gói Free là đủ).
-
Tài khoản Vercel hoặc Netlify nếu muốn đưa lên Internet (miễn phí).
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Thời gian cài đặt khoảng 15 phút. Hướng dẫn đầy đủ (có hình minh họa, xử lý lỗi) nằm trong file docs/huong-dan-su-dung.html – mở bằng trình duyệt.
Bước 1 – Cài thư viện
Cài Node.js 20+ tại nodejs.org. Giải nén mã nguồn, mở thư mục bằng VS Code, mở Terminal và chạy:
npm install
Bước 2 – Tạo project Supabase
Đăng nhập supabase.com/dashboard → New project, chọn region Southeast Asia (Singapore), chờ 1–2 phút để khởi tạo.
Bước 3 – Cài database (1 file duy nhất)
-
Mở file supabase/setup.sql. Ở dòng 17 chọn 'on' (có dữ liệu demo) hoặc 'off' (database trống để dùng thật).
-
Trong Supabase vào SQL Editor → New query, dán toàn bộ nội dung file và bấm Run.
Bước 4 – Cấu hình đăng nhập
Supabase → Authentication → URL Configuration:
-
Site URL: http://localhost:5173
-
Redirect URLs: http://localhost:5173/reset-password và http://localhost:5173/**
Bước 5 – Khai báo kết nối
Copy file .env.example thành .env, điền 2 giá trị lấy tại Supabase → Project Settings → API:
VITE_SUPABASE_URL=https://<project-ref>.supabase.co
VITE_SUPABASE_ANON_KEY=<anon hoặc publishable key>
Lưu ý: chỉ dùng anon / publishable key, không dùng service_role key.
Bước 6 – Chạy ứng dụng
npm run dev
Mở http://localhost:5173, đăng nhập owner@troflow.vn / TroFlow@2026 (nếu đã bật demo) hoặc bấm Đăng ký để tạo tài khoản chủ trọ mới.
Đưa lên Internet (Vercel – miễn phí)
-
Đẩy mã nguồn lên GitHub (nên để Private).
-
Vào vercel.com → Add New → Project → chọn repository, Framework: Vite.
-
Thêm 2 biến môi trường VITE_SUPABASE_URL và VITE_SUPABASE_ANON_KEY → Deploy.
-
Quay lại Supabase cập nhật Site URL / Redirect URLs bằng tên miền thật.
Nguồn: Topcode.vn
