Buttons

components/sistr/SistrButton.tsx

Primary - All Sizes

Primary Variants

Primary Variants - Disabled

Secondary

Secondary - All Sizes

Link

Text Fields

components/sistr/SistrTextField.tsx
Ce champ est requis

Select

components/sistr/SistrSelect.tsx
Française
Sélectionne une ville
Sélectionner
Sélection obligatoire
Valeur fixe

Switch & Checkbox

components/sistr/SistrSwitch.tsx, SistrCheckbox.tsx

Status Icons

components/sistr/StatusIcon.tsx

Size: lg

success
complete
alert
error
missing
missionAccepted
missionDeclined

Size: md (default)

success
complete
alert
error
missing
missionAccepted
missionDeclined

Size: sm

success
complete
alert
error
missing
missionAccepted
missionDeclined

Step Illustrations

components/sistr/StepIllustrationPhone.tsx, StepIllustrationProfil.tsx

On beige background (like landing)

1. Phone
2. Profil

On white background

Phone
Profil

TopActions

components/sistr/TopActions.tsx

With Step Counter

1 sur 6

Back Only

Close Only

No Step Counter

Wallet Status Badges

components/sistr/WalletStatusBadge.tsx

Sans stroke (défaut)

Wallet
Wallet
Wallet
Wallet
Wallet

Avec stroke noir (isActive)

Wallet
Wallet
Wallet
Wallet
Wallet

Wallet Header

components/sistr/WalletHeader.tsx

Bonjour, Alexandra

Mon wallet

Mon profil

Simple titre

Dashboard Header

components/sistr/DashboardHeader.tsx

Greeting Mode

Bonjour, Alexandra

Title Mode + Back Button

Mon wallet

With Notification

Bonjour, Alexandra

Tab Switcher

components/sistr/TabSwitcher.tsx

Wallet Status Cards

components/sistr/WalletStatusCard.tsx
Profil professionnel
Profil pro à jour
Documents personnels
Documents à jour
Documents personnels
1 document bientôt expiré
Documents personnels
1 document manquant
Documents personnels
7 documents manquants
Disponibilités
Dispos renseignées
Disponibilités
Dispos manquantes

Profil Card

components/sistr/ProfilCard.tsx
A
Alexandra Albane
06 10 10 10 10
alex.albane@gmail.com
J
Julien Durand
06 10 10 10 10
julien.durand@gmail.com
M
Marie Martin

Mission Cards

components/sistr/MissionCard.tsx
Aide soignant8h00 - 12h00
ipokrat
En attente de validation
Infirmier14h00 - 18h00
ipokrat
En attente de validation
Aide soignant8h00 - 18h00
ipokrat
Aide soignant8h00 - 18h00
ipokrat

Agence Card

components/sistr/AgenceCard.tsx
i
ipokrat
S
Santé Plus

Step Cards

components/sistr/StepCard.tsx
Créer ton wallet
1

Créer ton wallet

En quelques minutes ton profil devient missionnable.

Ajouter tes documents
2

Ajouter tes documents

Une seule saisie. Plus besoin de renvoyer tes documents.

Indiquer tes disponibilités
3

Indiquer tes disponibilités

Tes disponibilités deviennent la règle du jeu. Tu ne reçois que des missions compatibles.

Action Tiles

components/sistr/ActionTile.tsx

Big Square Buttons

components/sistr/BigSquareButton.tsx

Without sublabel

With sublabel

Info Card (Onboarding)

components/sistr/InfoCard.tsx

Avant de commencer, sache que

Tes informations restent sous ton contrôle
Tu n'auras besoin de les saisir qu'une seule fois
Indiquer une disponibilité n'est pas un engagement
Tu n'as rien à payer

Option Row

components/sistr/OptionRow.tsx

Upload Tiles

components/sistr/UploadTile.tsx

Doc Upload Card

components/sistr/DocUploadCard.tsx
Requis
Carte d'identiteou Passeport
Titre de sejoursejour.pdf
Diplome DEAS

Calendar Month

components/sistr/CalendarMonth.tsx
Février
L
M
M
J
V
S
D
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
En mission
Dispo
Indispo
Non renseigné

Day View

components/sistr/DayView.tsx

Mode: dispos

Lundi 12 février
Matin
Après-midi
Nuit

Mode: missions

Mardi 13 février
Matin
Après-midi
Nuit
Pas de mission
Pas de mission

All statuses

Mercredi 14 février
Matin
Après-midi
Nuit

Week View

components/sistr/WeekView.tsx

Mode: dispos

FévrierSemaine 7
L
10
M
11
M
12
J
13
V
14
S
15
D
16
Matin
Après-midi
Nuit
En mission
Dispo
Indispo
Non renseigné

Mode: missions

FévrierSemaine 8
L
17
M
18
M
19
J
20
V
21
S
22
D
23
Matin
Après-midi
Nuit
En mission
Dispo
Indispo
Non renseigné

Dispos List

components/sistr/DisposList.tsx
Février
jeu
12
ven
13
sam
14
dim
15

Missions List

components/sistr/MissionsList.tsx
Février
ven
13
Aide soignant8h00 - 12h00
ipokrat
En attente de validation
Infirmier14h00 - 18h00
ipokrat
En attente de validation
lun
16
Aide soignant8h00 - 18h00
ipokrat
mer
18
Aide soignant8h00 - 18h00
ipokrat
dim
22
Infirmier22h00 - 6h00
ipokrat
En attente de validation

Notifications

components/sistr/NotifInfo.tsx

Empty State

components/sistr/EmptyState.tsx

With action

Aucune dispo renseignéePour recevoir des missions adaptées, indique simplement tes disponibilités.

Without action

Aucune mission pour le momentLes missions apparaîtront ici dès qu'elles seront disponibles.

Bottom Sheet

components/sistr/BottomSheet.tsx

Drawer Mission Details (Mobile)

components/sistr/DrawerMissionDetails.tsx

Drawer Mission Details (Desktop)

components/sistr/DrawerMissionDetailsDesktop.tsx

Drawer Pending Mission (Mobile)

components/sistr/DrawerPendingMission.tsx

Drawer Pending Mission (Desktop)

components/sistr/DrawerPendingMissionDesktop.tsx

Onboarding Screen Demo

app/onboarding/
1 sur 6
Bonjour Julien,je suis sistr

Je vais t'aider à créer ton Wallet afin de rendre ton profil actif rapidement.

Avant de commencer, sache que

Tes informations restent sous ton contrôle
Tu n'auras besoin de les saisir qu'une seule fois
Indiquer une disponibilité n'est pas un engagement
Tu n'as rien à payer
Tu as déjà un compte ?

Wallet Screen Demo

app/dashboard/wallet/

Mon wallet

Profil professionnel
Profil pro à jour
Documents personnels
Documents à jour
Disponibilités
Dispos renseignées

Home Screen Demo

app/dashboard/

Bonjour, Alexandra

Aucune dispo renseignéePour recevoir des missions adaptées, indique simplement tes disponibilités.