Khu vực này hiển thị gồm các chức năng sau: Thông tin tài khoản, Danh sách các hóa đơn, Danh sách dịch vụ, thống kê.
Bảng 3.8. Mô tả các chức năng trong màn hình dashboard STT Tên 1 imgAccount 2 imgBill 3 imgService 4 imgReport
Khi người dùng chọn chức năng thông tin tài khoản giao diện sẽ trả về kết quả như sau:
Chi tiết màn hình thông tin tài khoản:
Bảng 3.9. Bảng mô tả màn hình thông tin tài khoản
STT Tên 1 2 imgIconUser 3 4 5 6 7 8 9 10 11
12 13 14 15 16 17 18 btnUpdateProfile 19 btnClose
Khi người dùng chọn chức năng danh sách các hóa đơn giao diện sẽ hiển thị như sau:
Hình 3.25. Màn hình danh sách hóa đơn
Chi tiết màn hình như sau:
Bảng 3.10. Bảng mô tả danh sách hóa đơn
STT Tên
1
2
3 rvBill
Code xử lý tải dữ liệu lên màn hình tương tự như mục 3.6.
Tại màn hình này cung cấp danh sách tất cả các hóa đơn có trong cơ sở dữ liệu thuộc quyền quản lý của user hiện tại. Trong danh sách hóa đơn nếu tồn tại lớn hơn hoặc một hóa đơn. Danh sách hóa đơn sẽ luôn chứa một dòng là chứa tiêu đề (với mục đích tiêu đề này là để gom các hóa có cùng một tháng lại với nhau) và n dòng các hóa đơn (n là tổng số hóa đơn của tháng đó). Ví
dụ nếu một tài khoản ABC có tổng cộng là 100 hóa đơn. Trong đó tổng số hóa đơn tháng 5, 6, 7 lần lượt là 11, 22, 67. Dựa vào dữ liệu tính toán được như sau:
➢ Tổng số dòng là 103.
➢ Số dòng chứa tiêu đề là 3.
➢ Số dòng chứa các hóa đơn là 100.
Bảng 3.11. Mô tả dữ liệu item tiêu đề hóa đơn
STT Nội dung
1 Month 12/2020
2 47,528,569đ
3 17 bill
Tiếp theo một dòng thể hiện một số thông tin hóa đơn.
Bảng 3.12. Mô tả dữ liệu trong item hóa đơn STT Nội dung 1 Service Rác 2 12/2020 09:16 3 Phòng 2 4 Paid 5 20,000 đ
Nếu như màn hình trên là thể hiện danh hóa đơn thì khi người dùng chọn chức năng danh sách dịch vụ. Trong giao diện dưới đây thể hiện tất cả các dịch vụ thuộc một tài khoản tài khoản. Giao diện sẽ hiển thị như sau:
Chi tiết màn hình danh sách dịch vụ như sau: Bảng 3.13. Bảng mô tả màn hình danh sách dịch vụ STT Tên 1 2 3 rvService 4 fab
Code xử lý tải dữ liệu lên màn hình tương tự như mục 3.6.
Đối với mỗi một dòng của danh sách dịch vụ sẽ thể hiện các thông tin như sau:
Bảng 3.14. Mô tả thông tin của item chi tiết dịch vụ
STT Nội dung
1 Icon
2 Rác
3 20,000 đ
Khi người dùng kéo từ phải qua trái sẽ có thêm 2 tính năng như sau:
Hình 3.30. Mô tả chức năng của item dịch vụ
Các dịch vụ như điện, nước là hai dịch vụ mặc định không được xóa. Còn các dịch vụ khác khi được tạo sẽ có hai chức năng là chỉnh sửa và xóa. Riêng chức năng chỉnh sửa và thêm mới dịch vụ sẽ được đề cập ở mục 3.13. Còn chức năng xóa, khi người dùng nhấn vào icon thùng rác. Hệ thống sẽ cảnh báo một thông báo dạng popup trên màn hình. Nếu người dùng chọn yes hệ thống sẽ xóa dữ liệu trên thống.
Hình 3.31. Thông báo khi thực hiện xóa một dịch vụ
Chức năng cuối của giao diện Dashboard là thống kê. Với giao diện này, người dùng có xem thống kê doanh thu theo từng tháng của một năm hiện tại hoặc năm người dùng nhập vào.
Hình 3.32. Màn hình thống kê
Chi tiết màn hình 3.32 như sau:
Bảng 3.15. Bảng mô tả màn hình thống kê STT Tên 1 2 3 4 edtChooseDate 5
6 comChart CombinedChart Biểu đồ Nơi hiển thị kết quả thống kê.
Code xử lý dữ liệu và hiển thị biểu đồ:
private fun createChartOfYear(listTotalOfYear: ArrayList<Float>) { val rightAxis: YAxis = comChart.axisRight
rightAxis.setDrawGridLines(false)
rightAxis.axisMinimum = 0f
val leftAxis: YAxis = comChart.axisLeft
leftAxis.setDrawGridLines(false)
leftAxis.axisMinimum = 0f
val xLabel: MutableList<String> = ArrayList()
xLabel.add("Jan")
xLabel.add("Feb")
xLabel.add("Mar")
xLabel.add("Apr")
xLabel.add("May")
xLabel.add("Jun")
xLabel.add("Jul")
xLabel.add("Aug")
xLabel.add("Sep")
xLabel.add("Oct")
xLabel.add("Nov")
xLabel.add("Dec")
val xAxis: XAxis = comChart.xAxis
xAxis.position =
XAxis.XAxisPosition.BOTTOM
xAxis.axisMinimum = 0f xAxis.granularity = 1f
xAxis.valueFormatter = IndexAxisValueFormatter(xLabel)
val data = CombinedData()
val lineDatas = LineData()
lineDatas.addDataSet(dataChart(listTotalOfYear) as ILineDataSet)
data.setData(lineDatas)
xAxis.axisMaximum = data.xMax + 0.25f
comChart.data = data
comChart.invalidate() }