Giao diện của đồ án tốt nghiệp về phần mềm quản lý và phân tích hình ảnh X-quang bệnh nhân, sử dụng ReactJS, dành riêng cho các bác sĩ và phòng khám chỉnh nha.

npm install
npm run serve

npm install
npm run build:prod
npm run prod

“Cấu trúc thư mục của dự án sẽ được tổ chức như sau:

1. auth: Thư mục này chứa các thành phần liên quan đến quản lý đăng nhập, đăng ký, và đặt lại mật khẩu của tài khoản.

2. common: Thư mục này chứa các thành phần con được sử dụng chung cho toàn bộ ứng dụng, bao gồm các nút, biểu mẫu, và các hộp thoại (modal).

3. components: Thư mục này chứa các thành phần lớn của ứng dụng, như các giao diện mà có thể được sử dụng nhiều lần trong các trang khác nhau.

4. config: Thư mục này chứa các thiết lập liên quan đến tài khoản trên đám mây và tài khoản Google.

5. locales: Thư mục này chứa cấu hình cho việc dịch ứng dụng thành hai ngôn ngữ: Tiếng Anh và Tiếng Việt.

6. mocks: Thư mục này chứa danh sách các giá trị tham khảo được sử dụng trong quá trình phân tích hình ảnh X-quang.

7. pages: Thư mục này chứa các trang và thành phần chính để tạo giao diện và hiển thị trên trình duyệt. Cụ thể:

   • CalculatorToothMovement: Thư mục này chứa tệp để thiết lập danh sách đường cong xương và răng.
   • calendar: Thư mục liên quan đến đặt lịch hẹn cho bệnh nhân trong phòng khám.
   • discussion: Thư mục chứa các thành phần cho việc chat và thảo luận giữa các bác sĩ, sử dụng Socket.IO.
   • lateralCephalometricAnalysis: Thư mục dành cho việc tạo danh sách các phân tích từ giao diện đến các lớp cấu hình (config class).
   • libraryImages: Thư mục để hiển thị giao diện xem ảnh của bệnh nhân và lưu trữ ảnh trên đám mây.
   • medicalRecord: Thư mục để lưu trữ hồ sơ bệnh án của bệnh nhân, bao gồm thông tin bệnh nhân, lịch sử bệnh, và lịch sử điều trị.
   • patientList: Thư mục để quản lý danh sách bệnh nhân của mỗi tài khoản bác sĩ, bao gồm bệnh nhân cá nhân, bệnh nhân phòng khám, và bệnh nhân được chia sẻ.
   • setting: Thư mục này nhằm thiết lập các thuộc tính liên quan đến thông tin bác sĩ và phòng khám, cũng như cài đặt các khóa mã hóa dữ liệu.

8. HomePage.jsx: Component cho trang chủ của ứng dụng.

9. NotFoundPage.jsx: Trang này được hiển thị khi đường dẫn không hợp lệ.

10. redux: Thư mục này chứa store cho toàn bộ ứng dụng, sử dụng Redux Toolkit để quản lý trạng thái ứng dụng.

11. services: Thư mục này chứa các hàm để gọi API và làm mới token.

12. translation: Thư mục này chứa cấu hình để dịch toàn bộ ứng dụng bằng cài đặt trong thư mục locales.

13. App.jsx: Tệp này thiết lập các đường dẫn cho các thành phần sử dụng React Router DOM.

14. index.css: Tệp này chứa các quy tắc CSS chung cho toàn bộ ứng dụng.

Ngoài ra, để phát triển và xây dựng sản phẩm, ứng dụng sử dụng Webpack để quản lý biến môi trường, cổng, và các plugin liên quan.”