ELVO Café POS - Phần mềm quản lý bán hàng quán cà phê

**ELVO Café POS** là giải pháp giao diện quản lý bán hàng dành cho quán cà phê và cửa hàng đồ uống, được thiết kế theo phong cách **sáng, hiện đại, chuyên nghiệp và dễ thao tác**.

Sản phẩm hướng đến việc tập trung các nghiệp vụ thường gặp trong quán vào một giao diện thống nhất: chọn món, tạo đơn, quản lý bàn, theo dõi pha chế, thanh toán, ca bán hàng và xem báo cáo. Thiết kế thích ứng với **máy tính để bàn, laptop, máy tính bảng và điện thoại**.

Phiên bản hiện tại là **bản mẫu frontend tương tác** sử dụng dữ liệu giả lập, phù hợp để giới thiệu sản phẩm, trải nghiệm quy trình và làm nền tảng phát triển hệ thống POS thực tế.

**ELVO Café POS** --- Mẫu giao diện phần mềm quản lý quán cà phê cao cấp, xây dựng bằng **HTML, CSS và JavaScript thuần**. Hỗ trợ trải nghiệm bán hàng tại quầy, phục vụ tại bàn, mang đi, sơ đồ bàn, đơn hàng, pha chế, thanh toán và báo cáo với dữ liệu mô phỏng. Giao diện responsive, có hình ảnh và giá sản phẩm minh họa, phù hợp để trình diễn, tùy chỉnh và phát triển thành sản phẩm thương mại.

• **Giao diện hiện đại:** màu xanh ELVO kết hợp nền sáng, thẻ nội dung

rõ ràng và hệ thống điều hướng gọn gàng.

• **Responsive đa thiết bị:** bố cục tự điều chỉnh cho desktop,

laptop, tablet và mobile; sidebar thu gọn, menu di động và khu vực giỏ hàng phù hợp màn hình nhỏ.

• **Danh mục sản phẩm trực quan:** hình minh họa đồ uống và bánh, tên

món, nhóm sản phẩm và giá tiền VND.

• **Bán hàng đa mô hình:** hỗ trợ tạo đơn tại quầy, đơn mang đi và đơn

phục vụ tại bàn.

• **Quản lý sơ đồ bàn:** hiển thị trạng thái bàn và các thao tác cơ

bản như mở bàn, chọn bàn, chuyển bàn.

• **Theo dõi đơn và pha chế:** hiển thị đơn hàng, phiếu pha chế và

trạng thái xử lý.

• **Thanh toán mô phỏng:** tiền mặt và chuyển khoản QR giả lập, không

kết nối ngân hàng.

• **Theo dõi ca bán:** mở ca, chốt ca và ghi nhận dữ liệu mô phỏng.
• **Dữ liệu demo có thể lưu cục bộ:** dùng `localStorage` trên trình

duyệt để duy trì trạng thái trong phạm vi bản mẫu.

• **Không cần framework:** có thể mở trực tiếp `index.html` để trải

nghiệm.

4.1. Bán tại quầy và mang đi

1. Nhân viên chọn loại đơn **Tại quầy** hoặc **Mang đi**.
2. Chọn món từ danh mục, điều chỉnh số lượng và tùy chọn.
3. Kiểm tra giỏ hàng, tổng tiền và giảm giá (nếu có).
4. Thực hiện **thanh toán trước** bằng phương thức mô phỏng.
5. Đơn được xác nhận và chuyển sang màn hình pha chế mô phỏng.

4.2. Phục vụ tại bàn

1. Chọn khu vực và bàn phù hợp.
2. Mở bàn, chọn món và ghi nhận đơn.
3. Gửi món sang pha chế trước khi thu tiền.
4. Theo dõi đơn và trạng thái bàn.
5. Khách **thanh toán sau**; khi hoàn tất, hệ thống mô phỏng cập nhật

trạng thái bàn.

4.3. Pha chế

1. Phiếu món mới xuất hiện trong khu vực pha chế.
2. Nhân viên theo dõi các phiếu và cập nhật trạng thái.
3. Thông tin đơn được sử dụng để mô phỏng quy trình phối hợp giữa thu

ngân và quầy pha chế.

4.4. Ca bán hàng

1. Nhập số tiền đầu ca và mở ca.
2. Thực hiện các đơn hàng mẫu.
3. Xem số liệu thu tiền theo phương thức.
4. Nhập tiền kiểm đếm và chốt ca.

Desktop và laptop

• Sidebar điều hướng có khả năng thu gọn và mở rộng.
• Khu vực POS ưu tiên danh sách sản phẩm và giỏ hàng.
• Bảng dữ liệu được bố trí trong vùng hiển thị phù hợp.
• Các card, biểu đồ và popup theo phong cách quản trị chuyên nghiệp.

Tablet

• Menu được tối ưu cho thao tác chạm.
• Lưới sản phẩm điều chỉnh số cột theo chiều rộng.
• Các khối nội dung và giỏ hàng thay đổi bố cục để giảm chật chội.

Mobile

• Menu hamburger và điều hướng thu gọn.
• Lưới sản phẩm, hình ảnh và giá minh họa dễ nhận biết.
• Giỏ hàng và thao tác chính được điều chỉnh cho màn hình nhỏ.
• Bảng dữ liệu có thể cuộn trong vùng riêng khi cần.

Mục tiêu thiết kế là hạn chế tràn viền và cuộn ngang ngoài ý muốn. Khả

năng hiển thị trên từng thiết bị vẫn cần được kiểm thử thực tế trước

khi triển khai thương mại.

Hạng mục Thông tin

\---

Ngôn ngữ giao diện HTML5 Định dạng giao diện CSS3 Xử lý tương tác Vanilla JavaScript Framework Không sử dụng React/Vue/Angular Lưu trạng thái demo `localStorage` Hình ảnh sản phẩm SVG nội bộ trong `assets/products/` Backend Chưa tích hợp Cơ sở dữ liệu máy chủ Chưa tích hợp Thanh toán ngân hàng Chưa tích hợp Đồng bộ nhiều thiết bị Chưa hỗ trợ thực tế Khả năng triển khai Mở cục bộ hoặc đưa lên hosting tĩnh

1. Giải nén bộ mã nguồn.
2. Giữ nguyên `index.html` và thư mục `assets/products/`.
3. Mở `index.html` bằng trình duyệt hiện đại.
4. Trải nghiệm tạo đơn, thanh toán giả lập, quản lý bàn, theo dõi pha

chế và báo cáo.

1. Có thể dùng tính năng đặt lại dữ liệu demo khi muốn khởi tạo lại

trạng thái mẫu.

• Chủ quán cà phê muốn xem trước mô hình phần mềm quản lý.
• Cửa hàng trà sữa, nước uống và quầy đồ uống nhỏ.
• Freelancer hoặc agency cần bộ giao diện POS để tùy chỉnh.
• Lập trình viên muốn phát triển hệ thống POS với backend riêng.
• Đơn vị cần prototype để thuyết trình, khảo sát nhu cầu và kiểm thử

UX/UI.

**ELVO Café POS phiên bản demo không phải phần mềm POS vận hành thương mại hoàn chỉnh.** Các điểm cần lưu ý:

• Dữ liệu chủ yếu là giả lập và lưu trên từng trình duyệt; không có cơ

sở dữ liệu dùng chung.

• Không đồng bộ đơn hàng giữa nhiều máy hoặc nhân viên theo thời gian

thực.

• QR thanh toán chỉ là mô phỏng, **không xác nhận giao dịch ngân hàng

thật**.

• Chưa có cơ chế đăng nhập, phân quyền và bảo mật phía máy chủ.
• Chưa tích hợp máy in hóa đơn, thiết bị POS hoặc quản lý tồn kho thực

tế.

• Các nghiệp vụ nâng cao như gộp bàn, tách hóa đơn, hoàn tiền nhiều

phần và đối soát đầy đủ cần phát triển thêm.

• Không nên dùng bản demo để ghi nhận doanh thu, xử lý thanh toán hoặc

lưu dữ liệu khách hàng thật.

**ELVO Café POS --- Đơn giản hóa vận hành, nâng tầm trải nghiệm bán hàng.**

Một giao diện POS trực quan, hiện đại và linh hoạt, giúp hình dung rõ quy trình vận hành quán cà phê từ tiếp nhận đơn đến pha chế, thanh toán và theo dõi hoạt động --- sẵn sàng làm nền tảng cho các bước phát triển phần mềm tiếp theo.

\---

**Đơn vị phát triển:** ELVO **Loại bàn giao:** Bộ mã nguồn giao diện và dữ liệu demo **Trạng thái:** Prototype / Frontend Demo **Ghi chú:** Nội dung mô tả dựa trên phiên bản ELVO Café POS V1.1; không hàm ý những tính năng backend chưa được triển khai.