GA-026 My-performance dashboard

[Rana7xi]

What this does

GA-026 a guard can now open a "My Performance" screen and see how their guard
score is made up, instead of just one number.

The score already came from GET /users/guards/:id/score and was shown on Home
and on Profile as a single value. The API also sends a full breakdown, but
src/api/guardScore.ts typed it as unknown and nothing used it. The breakdown is
now typed and used.

The new screen shows:

• the total guard score out of 100
• the three parts of the score with a bar and the numbers behind them:
  Punctuality (on-time check-ins), Shift completion (completed shifts) and
  Incidents (how many high, medium and low)
• streaks and a six week trend
• pull to refresh

The screen is opened from the Performance Summary card on Profile, which now
has a "View details" link.

Mock data

The API does not send streaks or a trend yet, so those numbers are sample data.
They are kept in one file, src/utils/performanceMock.ts, and nothing else in the
app uses it. Both sections are marked with a "Sample data" tag and there is a
note under them saying real values will be used once the API sends them. The
score and the breakdown are always the real API values.

The screen is read only, it does not send anything to the backend.

Tested

Logged in as a seeded guard with shifts, attendance and incidents. The screen
showed 68 out of 100 with Punctuality 35/35, Shift completion 17.5/35 and
Incidents 15/30, which is exactly what the API returns for that guard.

To check pull to refresh, one assigned shift was marked completed in the
database and the screen was pulled down. The score changed to 85 and Shift
completion went from "1 of 2 shifts completed" to "2 of 2 shifts completed".

New text added to all six locale files.