MuhammadSawalhy / zu-hospital-frontend

ZU-Hospital System

ZU.Hospital.Overview.2.-.480p.-.Made.with.Clipchamp.mp4

Getting Started

pnpm dev

I18n

Install i18n-ally extension.

We use i18n-ally extension which is available in many code editors including VSCode. It provides an inline preview of translations in your code directly. It is also helpful for automatically translating your messages using Google Translator for example. You can use it to extract text from the code and put them in the default locale file.

Mantine components library

Mantine docs recommended adding this to .vscode/settings.json file:

{
  // for i18n-ally
  "i18n-ally.localesPaths": ["i18n", "messages"],
  "i18n-ally.keystyle": "nested",
  // for mantine
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/@mantine/core/styles.css",
  ],
}

General Links

• tldraw
• API Docs

Project parts

Login page

• Cookies
• Managing the session and storing JWT tokens.
• Store the user type (patient, doctor, or admin) in a cookie.
• Refresh the access token after expiration. (Related to Axios library, which is used for making requests to the backend server.)
• Logout will just remove the cookies.
• Automatically log out if the refresh token expires.

Add patient

• Check for existing patients with the same national ID and display action buttons if so.
  • Go to this patient page.
  • Add a visit to this patient.
• Data of the address field (street, city, governorate) is stored in a file in the front end.
• Upload an image for the patient.
• Using the same form for editing the patient.
• Only the name and the national ID are required, other fields may be empty.

Patient page

• Common header for the page:
  • Display the current active visit details.
  • Actions menu (three dots).
    • Edit button (go the a page similar to the page for adding patients).
    • Delete (soft deleting) the patient.
• Details tabs:
  • Display the patient details.
  • Display the patient visits in a table.
  • Display the doctors the patient once visited in a table.
• Measurements tab:
  • Display the patient measurements in a table.
  • Add a measurement if a visit is currently active.
  • Display a graph of the patient measurements.
• Documents tab:
  • Display the current documents.
  • Drag-and-drop field to add more documents.
    • Automatically detect the file name.
  • Delete or edit a document.
    • You can edit the file name or the file kind (i.e. blood test).

Theme & Translation

• The main task here is to make sure all pages implement translation and dark/light modes correctly.
• We used Mantine library for the UI components.
• We used VSCode i18n-ally extension to easily translate and extract text.
• next-intl library is used with Next.js and configured to support ar and en locales.

Table component

• Customizing mantine-react-table library.
• Build the common logic of the table to be used in all the system pages.
• Store the filtering state, pagination, and sorting.
• Export to CVS file.
• Refresh data.

Dashboard

• Display statistics (i.e. patients count).
• Display the active, upcoming, and missed visits in a table.

Patients page

• Patients table with search, sort, and other features.
• Current vs. Deleted tabs.
• Configure columns.

Doctors page

• Doctors table with search, sort, and other features.
• Current vs. Deleted tabs.
• Configure columns.
• Create a new doctor button.
• Actions menu.
  • Delete, restore, or edit the doctor.