📄 Forms Library — Thư Viện Biểu Mẫu Webapp
Webapp nội bộ giúp nhân viên tìm và tạo bản sao biểu mẫu chuẩn từ Google Docs. File gốc luôn an toàn 100%.
Tác giả: Tuyết Chinh (Chinh Nguyen)
Phiên bản: 2.0
Ngày tạo: 2026-03-14
Live: thu-vien-bieu-mau.vercel.app
Pain Point
Hệ quả
"Anh/chị ơi cho em xin cái form nghỉ phép..."
Mất thời gian cả 2 bên
File gốc qua tay 5-6 người → sai font, lệch dòng
"Tam sao thất bản"
Người mới vào không biết form chuẩn ở đâu
Tạo form tự chế, bị trả về
File lưu rải rác trên máy mỗi người
Không quản lý được phiên bản
User vào webapp → Tìm kiếm/Lọc → Click "Xem chi tiết"
→ Popup hướng dẫn → Bấm "Tạo bản sao"
→ Google Docs mở /copy → File copy về Drive cá nhân
→ FILE GỐC KHÔNG BỊ THAY ĐỔI ✅
Phase 1: Lên kế hoạch (Guides 01–05) Phase 2: Thiết kế & Build (Guides 06) Phase 3: Deploy (Guide 07) forms-library-webapp/
├── README.md ← File này — Tổng quan toàn bộ
├── vercel.json ← Config deploy Vercel
│
├── guides/ ← 7 bước hướng dẫn chi tiết
│ ├── 01-brainstorm-worksheet.md
│ ├── 02-library-structure-design.md
│ ├── 03-style-format-standards.md
│ ├── 04-workflow-mapping.md
│ ├── 05-implementation-plan-template.md
│ ├── 06-style-selection.md
│ └── 07-deploy-guide.md
│
├── src/ ← Source code webapp
│ ├── index.html ← Giao diện chính
│ ├── style.css ← Design system (EcoTrack green)
│ ├── app.js ← Logic (Search, Filter, Modal)
│ └── data/
│ └── forms.json ← Config 12 biểu mẫu
│
└── scripts/
└── BatchCreateForms.gs ← Script tạo form trên Google Docs
📋 Danh sách 12 biểu mẫu có sẵn
#
Mã
Tên
Phòng ban
1
BM.HCNS.01
Phiếu Yêu Cầu Tuyển Dụng
Nhân sự
2
BM.HCNS.02
Đơn Xin Nghỉ Phép
Nhân sự
3
BM.HCNS.03
Tờ Trình Đề Xuất
Nhân sự
4
BM.KT.01
Giấy Đề Nghị Tạm Ứng
Kế Toán
5
BM.KT.02
Đề Nghị Thanh Toán
Kế Toán
6
BM.KT.03
Phiếu Thu
Kế Toán
7
BM.KT.04
Phiếu Chi
Kế Toán
8
BM.MH.01
Phiếu Yêu Cầu Mua Hàng
Mua Hàng
9
BM.VH.01
Biên Bản Họp
Vận Hành
10
BM.VH.02
Biên Bản Bàn Giao Công Việc
Vận Hành
11
BM.VH.03
Biên Bản Nghiệm Thu
Vận Hành
12
BM.IT.01
Phiếu Yêu Cầu Hỗ Trợ IT
IT
🎯 Workflow chính (dành cho doanh nghiệp)
Code
Workflow
Mô tả
WF-01
Tìm biểu mẫu
Tìm nhanh form cần dùng
WF-03
Tạo bản sao
Click → Google Docs /copy
WF-06
Quản lý Admin
Admin cập nhật form gốc
WF-07
Nộp biểu mẫu
In hoặc gửi form đã điền
WF-09
Quản lý phiên bản
Kiểm soát form chuẩn
Sửa src/data/forms.json — thêm object mới:
{
"code" : " BM.XX.01" "name" : " Tên biểu mẫu" "department" : " TenPhongBan" "icon" : " 📄" "description" : " Mô tả ngắn" "googleDocId" : " ID_TU_GOOGLE_DOCS" "copyLink" : " https://docs.google.com/document/d/ID/copy" "instructions" : [" Bước 1" " Bước 2" " Bước 3"
Màu sắc: Sửa CSS variables trong src/style.css (dòng 1-12)
Font: Thay --font-heading và --font-body
Logo: Sửa SVG trong src/index.html
Sửa DEPT_LABELS và DEPT_ICONS trong src/app.js
📝 Bonus nâng cao (tự học) Được tạo bởi Tuyết Chinh. Package dành cho học viên được hướng dẫn trực tiếp.