Create production UI

[permafrost06]

This is our penultimate step to prod. The flow will be like this:

• (New sign in) Sign-in -> Main page
• (Signed-in user) Enter pin -> Main page

From main page, the following pages can be accessed:

• Tests management
• Statistics
• Settings

Settings page will have the following:

• SMS: Set SMS message (+ see preview), see SMS balance, set default SMS status¹, change SMS token (advanced)
• User Management (admin only): See all users, create, modify, delete users
• Account Management: Set PIN, Log out

---

Fonts

Heading: Space Grotesk Body: Open Sans

Colors

Text primary: Pure black (#000000) Background primary: pure white (#FFFFFF) Neutral: grey (#595959) Accent color: #820097 Danger color: #F24E1E

---

Pages to create:

• [x] Sign-in (with password/with PIN if logged in)
• [x] Main/home/landing page
• [x] Add patient
• [x] Add report to patient
• [x] Settings
  • [x] Tests management
    • view, add, edit, delete tests
  • [x] Report templates management
    • view, add, edit, delete report templates
  • [x] Account management
    • change name
    • change password
    • change pin
    • log out
• [x] Invoice print layout (copy from v2)
• [x] Report print layout (copy from v2)

Tasks:

• [x] Decide color scheme
• [x] Select font(s)

Figma design: https://www.figma.com/file/yNYX7nIJE5xRUsKW5g4xlT/Clinic-web-app-(Copy)?type=design&node-id=0%3A1&mode=design&t=NhUwFtOOjGfgECKI-1

We are probably not going to use most of the design from this apart from some stuff e.g. notification holder, chart design etc.

---

1: whether the "Send SMS" checkbox is checked by default when creating report.

[permafrost06]

Fonts

Heading: Space Grotesk Body: Open Sans

Colors

Pure black (#000000), pure white (#FFFFFF), and grey (#595959). An accent color may be used, to be decided later. Please use CSS vars for colors.

[protibimbok]

Should we use RGB values as colors?

:root {
    --clr-accent: 0, 114, 143;
}

Then in css we'll have the option to use like:

button {
    background: rgb(var(--clr-accent));
}
button:hover  {
    background: rgba(var(--clr-accent), 0.9);
}

This is what tailwind does behind the scene.

[permafrost06]

If that benefits us, then yes, but will it benefit us? How?

[protibimbok]

Its benefit is mainly to accent, danger, success & warning styles. As the background, text & the border is just different variation of the same color. In these cases, we won't have to specify them separately we can just apply different alpha.

[permafrost06]

Okay, we'll use similarly structured CSS vars, then. Approved.

[permafrost06]

We need a new page: Reset password. If user forgets pin, then they'll be logged out and they'll have to log in with password. Once logged in, they can reset the pin using the password.

[permafrost06]

Test management page will be inside settings page

[permafrost06]

@protibimbok --clr-black and --clr-white will be problematic if we decide to change the colors. Please update the color vars like this:

Text primary: Pure black (#000000) Background primary: pure white (#FFFFFF) Neutral: grey (#595959) Accent color: #820097 Danger color: #F24E1E

Please let me know if you have any comments/suggestions about the naming.

[permafrost06]

Settings:

appearance

• theme -> light, dark (with preview photos)
• font size -> sm, m, l, xl
• table
  • default sort
  • cols to show
  • resize

tests

• view, add, edit, delete tests

report templates

• view, add, edit, delete report templates

sms

• view sms balance
• change sms message + see preview
• set default sms state

printing

• invoice layout
• report layout
• test print invoice/report

charts

• ???

notifications

• ???

account

• change name
• change password
• change pin
• log out

manage users (admin only)

• view, edit users
• request deletion, request new account

about

advanced

• turso db url
• api (worker) url
• sms, api, vite_auth, turso tokens
• color vars
  • primary
  • secondary
  • ...
  • accent
  • danger
• change fonts
  • heading
  • body
• padding, margin

All settings don't have to be implemented on v3.0. Only tests, report templates, and account settings.

[permafrost06]

Please implement pagination, sorting, filtering for patient list.

• When clicked on the sort icon next to a header, that column will be sorted and the icon will show the sort direction. Clicking on the sort icon again will change the sort direction. It'll also update the sort button text. (Implement sort button actions later).
• Implement the discord style searchbar for filtering: all fields will be searched for the search string. field:search-string will search only in the specified field. Remove the filter button. Clicking on the filter icon next to a header will move focus to the searchbar and add the field name to the searchbar. For example: when clicked on the filter icon next to "Type", type: will be inserted to the searchbar.

[permafrost06]

The icons for status field and report button in patients list may be ignored for now.

[permafrost06]

Reset password page is not necessary. Password reset will be done manually by contacting developer.

[permafrost06]

v2 invoice page:

[permafrost06]

closed by #64