mxhx fiddling

Partially solved mxhx font embed issue
MXHX again
2026-01-22 20:54:47 +01:00 · 2026-01-19 18:42:49 +01:00 · 2026-01-15 21:03:30 +01:00 · 2026-01-13 15:30:33 +01:00 · 2026-01-09 10:07:47 +01:00 · 2026-01-05 14:09:38 +01:00
69 changed files with 4488 additions and 434 deletions
@@ -0,0 +1,3 @@
+{
+    "haxe.configurations": []
+}
@@ -1,201 +1,10 @@
 [
  {
    "id": 1,
-    "name": "Maitray",
-    "firstName": "Camille",
-    "age": "11",
-    "lastLessonDate": "1757548800000",
-    "level": "1",
-    "credit": "10",
-    "address": "8 rue de Chez Douteau, 17600 Corme-Écluse",
-    "notes": "🐤",
-    "ffeLicence": "true",
-    "ffeLicenceValidityYear": "2025",
-    "ffeLicenceNumber": "6178760C",
-    "legalGuardianName": "Maitray",
-    "legalGuardianFirstName": "Vincent",
-    "legalGuardianRole": "père",
-    "legalGuardianPhoneNumber": "0640180230",
-    "legalGuardianEmail": "vincent.maitray@gmail.com"
-  },
-
-  {
-    "id": 0,
-    "name": "Durand",
-    "firstName": "Lucas",
-    "age": 12,
-    "lastLessonDate": 1711574400,
-    "level": 1,
-    "credit": 8,
-    "address": "14 rue des Acacias, 75017 Paris",
-    "notes": "Bon progrès, travaille la posture.",
-    "ffeLicence": true,
-    "ffeLicenceValidityYear": 2025,
-    "ffeLicenceNumber": "C1234567",
-    "legalGuardianName": "Durand",
-    "legalGuardianFirstName": "Sophie",
-    "legalGuardianRole": "mère",
-    "legalGuardianPhoneNumber": "01 45 67 89 10",
-    "legalGuardianEmail": "sophie.durand@example.com"
-  },
-  {
-    "id": 1,
-    "name": "Martin",
-    "firstName": "Emma",
-    "age": 9,
-    "lastLessonDate": 1704067200,
-    "level": 0,
-    "credit": 3,
-    "address": "7 avenue Victor Hugo, 33000 Bordeaux",
-    "notes": "Très attentive, timide en groupe.",
-    "ffeLicence": false,
-    "ffeLicenceValidityYear": 2026,
-    "ffeLicenceNumber": "C7654321",
-    "legalGuardianName": "Lemoine",
-    "legalGuardianFirstName": "Claire",
-    "legalGuardianRole": "mère",
-    "legalGuardianPhoneNumber": "05 56 12 34 56",
-    "legalGuardianEmail": "claire.lemoine@example.net"
-  },
-  {
-    "id": 2,
-    "name": "Bernard",
-    "firstName": "Tom",
-    "age": 15,
-    "lastLessonDate": 1716844800,
-    "level": 2,
-    "credit": -2,
-    "address": "23 boulevard Gambetta, 59000 Lille",
-    "notes": "Doit rattraper les cours manqués.",
-    "ffeLicence": true,
-    "ffeLicenceValidityYear": 2026,
-    "ffeLicenceNumber": "C9876543",
-    "legalGuardianName": "Bernard",
-    "legalGuardianFirstName": "Marc",
-    "legalGuardianRole": "père",
-    "legalGuardianPhoneNumber": "03 20 33 44 55",
-    "legalGuardianEmail": "marc.bernard@mail-example.fr"
-  },
-  {
-    "id": 3,
-    "name": "Petit",
-    "firstName": "Léa",
-    "age": 7,
-    "lastLessonDate": 1709548800,
-    "level": 0,
-    "credit": 12,
-    "address": "5 impasse des Lilas, 87000 Limoges",
-    "notes": "Très sociable, aime les activités créatives.",
-    "ffeLicence": false,
-    "ffeLicenceValidityYear": 2025,
-    "ffeLicenceNumber": "C2345678",
-    "legalGuardianName": "Moreau",
-    "legalGuardianFirstName": "Anne",
-    "legalGuardianRole": "grand-mère",
-    "legalGuardianPhoneNumber": "05 55 12 23 34",
-    "legalGuardianEmail": "anne.moreau@example.org"
-  },
-  {
-    "id": 4,
-    "name": "Roux",
-    "firstName": "Noah",
-    "age": 11,
-    "lastLessonDate": 1712150400,
-    "level": 1,
-    "credit": 0,
-    "address": "98 route de Grenoble, 73000 Chambéry",
-    "notes": "Besoin d'encouragement pour prendre confiance.",
-    "ffeLicence": true,
-    "ffeLicenceValidityYear": 2025,
-    "ffeLicenceNumber": "C3456789",
-    "legalGuardianName": "Lefèvre",
-    "legalGuardianFirstName": "Isabelle",
-    "legalGuardianRole": "mère",
-    "legalGuardianPhoneNumber": "04 79 11 22 33",
-    "legalGuardianEmail": "isabelle.lefevre@example.com"
-  },
-
-  {
-    "id": 5,
-    "name": "Morel",
-    "firstName": "Mathis",
-    "age": 13,
-    "lastLessonDate": 1710326400,
-    "level": 2,
-    "credit": 5,
-    "address": "12 rue Jean Jaurès, 44000 Nantes",
-    "notes": "Technique en amélioration.",
-    "ffeLicence": true,
-    "ffeLicenceValidityYear": 2026,
-    "ffeLicenceNumber": "C4567890",
-    "legalGuardianName": "Dubois",
-    "legalGuardianFirstName": "Caroline",
-    "legalGuardianRole": "mère",
-    "legalGuardianPhoneNumber": "02 40 12 34 56",
-    "legalGuardianEmail": "caroline.dubois@example.com"
-  },
-  {
-    "id": 6,
-    "name": "Garcia",
-    "firstName": "Chloé",
-    "age": 8,
-    "lastLessonDate": 1706784000,
-    "level": 0,
-    "credit": 10,
-    "address": "3 place Sainte-Catherine, 33000 Bordeaux",
-    "notes": "Très impliquée et souriante.",
-    "ffeLicence": false,
-    "ffeLicenceValidityYear": 2025,
-    "ffeLicenceNumber": "C1122334",
-    "legalGuardianName": "Garcia",
-    "legalGuardianFirstName": "Ismaël",
-    "legalGuardianRole": "père",
-    "legalGuardianPhoneNumber": "05 56 78 90 12",
-    "legalGuardianEmail": "ismael.garcia@mail-example.fr"
-  },
-  {
-    "id": 7,
-    "name": "Fischer",
-    "firstName": "Hugo",
-    "age": 16,
-    "lastLessonDate": 1714512000,
-    "level": 2,
-    "credit": -5,
-    "address": "45 avenue Foch, 06000 Nice",
-    "notes": "Doit respecter les règles du groupe.",
-    "ffeLicence": true,
-    "ffeLicenceValidityYear": 2026,
-    "ffeLicenceNumber": "C9988776",
-    "legalGuardianName": "Fischer",
-    "legalGuardianFirstName": "Monique",
-    "legalGuardianRole": "grand-mère",
-    "legalGuardianPhoneNumber": "04 93 12 34 56",
-    "legalGuardianEmail": "monique.fischer@example.net"
-  },
-  {
-    "id": 8,
-    "name": "Lefort",
-    "firstName": "Maya",
-    "age": 10,
-    "lastLessonDate": 1709452400,
-    "level": 1,
-    "credit": 7,
-    "address": "28 rue Carnot, 21000 Dijon",
-    "notes": "Bonne écoute, progresser en endurance.",
-    "ffeLicence": true,
-    "ffeLicenceValidityYear": 2025,
-    "ffeLicenceNumber": "C5566778",
-    "legalGuardianName": "Lefort",
-    "legalGuardianFirstName": "Paul",
-    "legalGuardianRole": "père",
-    "legalGuardianPhoneNumber": "03 80 12 34 56",
-    "legalGuardianEmail": "paul.lefort@example.org"
-  },
-  {
-    "id": 9,
+    "uid": "4f9b61d5-3747-466c-80de-f307bb6c63d1",
    "name": "Dupuy",
    "firstName": "Sacha",
-    "age": 6,
+    "age": 12,
    "lastLessonDate": 1705132800,
    "level": 0,
    "credit": 15,
@@ -209,5 +18,425 @@
    "legalGuardianRole": "mère",
    "legalGuardianPhoneNumber": "03 88 12 34 56",
    "legalGuardianEmail": "elodie.martin@example.com"
+  },
+  {
+    "id": 2,
+    "uid": "f08674e5-03e1-4cd6-9cb6-eb510df88d61",
+    "name": "Lefèvre",
+    "firstName": "Emma",
+    "age": 15,
+    "lastLessonDate": 1704873600,
+    "level": 1,
+    "credit": 12,
+    "address": "12 avenue Victor Hugo, 59000 Lille",
+    "notes": "Bonne attitude, progrès réguliers.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2025,
+    "ffeLicenceNumber": "C4455667",
+    "legalGuardianName": "Lefèvre",
+    "legalGuardianFirstName": "Claire",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "03 20 11 22 33",
+    "legalGuardianEmail": "claire.lefevre@example.com"
+  },
+  {
+    "id": 3,
+    "uid": "a169b8f1-1fea-4a09-84e2-19b3d7e98083",
+    "name": "Bernard",
+    "firstName": "Lucie",
+    "age": 10,
+    "lastLessonDate": 1704797200,
+    "level": 2,
+    "credit": 8,
+    "address": "4 place du Général Leclerc, 44000 Nantes",
+    "notes": "Concentré mais timide, besoin d'encouragements.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2024,
+    "ffeLicenceNumber": "C5566778",
+    "legalGuardianName": "Bernard",
+    "legalGuardianFirstName": "Sophie",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "02 40 12 34 56",
+    "legalGuardianEmail": "sophie.bernard@example.com"
+  },
+  {
+    "id": 4,
+    "uid": "92d4a474-54da-4337-910a-b5364239fd45",
+    "name": "Moreau",
+    "firstName": "Julie",
+    "age": 12,
+    "lastLessonDate": 1704700800,
+    "level": 3,
+    "credit": 5,
+    "address": "28 rue Nationale, 75002 Paris",
+    "notes": "Très motivé, objectifs de compétition.",
+    "ffeLicence": true,
+    "ffeLicenceValidityYear": 2025,
+    "ffeLicenceNumber": "F7788990",
+    "legalGuardianName": "Moreau",
+    "legalGuardianFirstName": "Marc",
+    "legalGuardianRole": "père",
+    "legalGuardianPhoneNumber": "01 42 68 99 01",
+    "legalGuardianEmail": "marc.moreau@example.com"
+  },
+  {
+    "id": 5,
+    "uid": "fd96e97f-747c-4316-8d43-0da5240abc6b",
+    "name": "Roux",
+    "firstName": "Léna",
+    "age": 10,
+    "lastLessonDate": 1704614400,
+    "level": 1,
+    "credit": 20,
+    "address": "3 chemin des Lilas, 63000 Clermont-Ferrand",
+    "notes": "Enjouée, adore les poneys.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2027,
+    "ffeLicenceNumber": "C8899001",
+    "legalGuardianName": "Roux",
+    "legalGuardianFirstName": "Anne",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "04 73 12 34 56",
+    "legalGuardianEmail": "anne.roux@example.com"
+  },
+  {
+    "id": 6,
+    "uid": "3fc0f71e-531e-4c12-8442-e86eb4ebcdab",
+    "name": "Garnier",
+    "firstName": "Estelle",
+    "age": 14,
+    "lastLessonDate": 1704528000,
+    "level": 4,
+    "credit": 3,
+    "address": "15 boulevard Gambetta, 13800 Istres",
+    "notes": "Technique solide, sérieux.",
+    "ffeLicence": true,
+    "ffeLicenceValidityYear": 2026,
+    "ffeLicenceNumber": "F9900112",
+    "legalGuardianName": "Garnier",
+    "legalGuardianFirstName": "Isabelle",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "04 42 55 66 77",
+    "legalGuardianEmail": "isabelle.garnier@example.com"
+  },
+  {
+    "id": 7,
+    "uid": "f3272013-0b87-4c9e-aafc-9edec8ed280f",
+    "name": "Faure",
+    "firstName": "Emma",
+    "age": 5,
+    "lastLessonDate": 1704441600,
+    "level": 0,
+    "credit": 0,
+    "address": "9 impasse des Roses, 31000 Toulouse",
+    "notes": "Très gentille, se sent à l'aise avec les équidés.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2025,
+    "ffeLicenceNumber": "C1122334",
+    "legalGuardianName": "Faure",
+    "legalGuardianFirstName": "Nicolas",
+    "legalGuardianRole": "père",
+    "legalGuardianPhoneNumber": "05 61 22 33 44",
+    "legalGuardianEmail": "nicolas.faure@example.com"
+  },
+  {
+    "id": 8,
+    "uid": "0b131632-ba7b-49e6-bd57-b73be26b88a4",
+    "name": "Marchal",
+    "firstName": "Noémie",
+    "age": 11,
+    "lastLessonDate": 1704355200,
+    "level": 2,
+    "credit": 10,
+    "address": "21 rue de la Gare, 67000 Strasbourg",
+    "notes": "Bon sens de l'équilibre, besoin de confiance.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2026,
+    "ffeLicenceNumber": "C2233445",
+    "legalGuardianName": "Marchal",
+    "legalGuardianFirstName": "Julie",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "03 88 44 55 66",
+    "legalGuardianEmail": "julie.marchal@example.com"
+  },
+  {
+    "id": 9,
+    "uid": "0b0681f4-8895-4b63-94a8-02dbc933d39d",
+    "name": "Gauthier",
+    "firstName": "Léo",
+    "age": 7,
+    "lastLessonDate": 1704268800,
+    "level": 3,
+    "credit": 6,
+    "address": "47 allée des Acacias, 34000 Montpellier",
+    "notes": "Travaille bien en groupe, compétitrice.",
+    "ffeLicence": true,
+    "ffeLicenceValidityYear": 2025,
+    "ffeLicenceNumber": "F3344556",
+    "legalGuardianName": "Gauthier",
+    "legalGuardianFirstName": "Olivier",
+    "legalGuardianRole": "père",
+    "legalGuardianPhoneNumber": "04 67 12 34 56",
+    "legalGuardianEmail": "olivier.gauthier@example.com"
+  },
+  {
+    "id": 10,
+    "uid": "98f17fe3-a656-45c9-b39d-67321a92912b",
+    "name": "Perrin",
+    "firstName": "Ricardo",
+    "age": 16,
+    "lastLessonDate": 1704182400,
+    "level": 0,
+    "credit": -10,
+    "address": "2 rue des Peupliers, 59000 Lille",
+    "notes": "Très attachée au poney, sociable.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2028,
+    "ffeLicenceNumber": "C4455668",
+    "legalGuardianName": "Perrin",
+    "legalGuardianFirstName": "Marie",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "03 20 44 55 66",
+    "legalGuardianEmail": "marie.perrin@example.com"
+  },
+  {
+    "id": 11,
+    "uid": "edf0980a-9941-4f82-a7ac-b92b17456d0f",
+    "name": "Blanc",
+    "firstName": "Hugo",
+    "age": 15,
+    "lastLessonDate": 1704096000,
+    "level": 5,
+    "credit": 2,
+    "address": "8 rue Victor Schoelcher, 97400 Saint-Denis",
+    "notes": "Très expérimenté, prépare les examens.",
+    "ffeLicence": true,
+    "ffeLicenceValidityYear": 2026,
+    "ffeLicenceNumber": "F5566778",
+    "legalGuardianName": "Blanc",
+    "legalGuardianFirstName": "Laurence",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "02 62 12 34 56",
+    "legalGuardianEmail": "laurence.blanc@example.com"
+  },
+  {
+    "id": 12,
+    "uid": "4ec73195-d431-46e0-8aaf-79b9e0d65f3c",
+    "name": "Kim Jan Bo",
+    "firstName": "Nguam",
+    "age": 17,
+    "lastLessonDate": 1704009600,
+    "level": 1,
+    "credit": 14,
+    "address": "30 avenue Jean Jaurès, 76000 Rouen",
+    "notes": "Très attentive, apprend vite.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2027,
+    "ffeLicenceNumber": "C6677889",
+    "legalGuardianName": "Mercier",
+    "legalGuardianFirstName": "Paul",
+    "legalGuardianRole": "père",
+    "legalGuardianPhoneNumber": "02 35 12 34 56",
+    "legalGuardianEmail": "paul.mercier@example.com"
+  },
+  {
+    "id": 13,
+    "uid": "13f7fcf4-4aca-43a6-8ace-5e4e45e5d4d1",
+    "name": "Chevalier",
+    "firstName": "Joachim",
+    "age": 15,
+    "lastLessonDate": 1703923200,
+    "level": 3,
+    "credit": 7,
+    "address": "11 rue des Fleurs, 33000 Bordeaux",
+    "notes": "Bonne assiette, travaille la rigueur.",
+    "ffeLicence": true,
+    "ffeLicenceValidityYear": 2025,
+    "ffeLicenceNumber": "F7788112",
+    "legalGuardianName": "Chevalier",
+    "legalGuardianFirstName": "Hélène",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "05 56 12 34 56",
+    "legalGuardianEmail": "helene.chevalier@example.com"
+  },
+  {
+    "id": 14,
+    "uid": "ecb26545-b56f-40f7-9414-aef37ddd96bb",
+    "name": "Gilles",
+    "firstName": "Noémie",
+    "age": 8,
+    "lastLessonDate": 1703836800,
+    "level": 1,
+    "credit": 16,
+    "address": "19 rue des Écoles, 21000 Dijon",
+    "notes": "Curieuse et dynamique.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2026,
+    "ffeLicenceNumber": "C8899113",
+    "legalGuardianName": "Gilles",
+    "legalGuardianFirstName": "Sébastien",
+    "legalGuardianRole": "père",
+    "legalGuardianPhoneNumber": "03 80 12 34 56",
+    "legalGuardianEmail": "sebastien.gilles@example.com"
+  },
+  {
+    "id": 15,
+    "uid": "eca6c30f-5b20-4f02-a192-9c24a55155b7",
+    "name": "Rousseau",
+    "firstName": "Malo",
+    "age": 11,
+    "lastLessonDate": 1703750400,
+    "level": 2,
+    "credit": 11,
+    "address": "5 allée des Tilleuls, 35000 Rennes",
+    "notes": "Bon esprit d'équipe, franchit bien les obstacles.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2025,
+    "ffeLicenceNumber": "C9900224",
+    "legalGuardianName": "Rousseau",
+    "legalGuardianFirstName": "Claire",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "02 99 12 34 56",
+    "legalGuardianEmail": "claire.rousseau@example.com"
+  },
+  {
+    "id": 16,
+    "uid": "df464420-3c7c-40ce-9616-ad57cfc43ace",
+    "name": "Picard",
+    "firstName": "Gabriel",
+    "age": 13,
+    "lastLessonDate": 1703664000,
+    "level": 3,
+    "credit": 4,
+    "address": "42 boulevard Carnot, 13001 Marseille",
+    "notes": "Bonne endurance, besoin d'affiner la technique.",
+    "ffeLicence": true,
+    "ffeLicenceValidityYear": 2026,
+    "ffeLicenceNumber": "F0011334",
+    "legalGuardianName": "Picard",
+    "legalGuardianFirstName": "Isabelle",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "04 91 12 34 56",
+    "legalGuardianEmail": "isabelle.picard@example.com"
+  },
+  {
+    "id": 17,
+    "uid": "444dc6c0-4e39-4d0e-8f07-90fd2be6335f",
+    "name": "Dupont",
+    "firstName": "Zoé",
+    "age": 6,
+    "lastLessonDate": 1703577600,
+    "level": 0,
+    "credit": 22,
+    "address": "7 rue du Moulin, 67000 Strasbourg",
+    "notes": "Très enthousiaste, aime les jeux montés.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2028,
+    "ffeLicenceNumber": "C1122445",
+    "legalGuardianName": "Dupont",
+    "legalGuardianFirstName": "Marion",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "03 88 77 66 55",
+    "legalGuardianEmail": "marion.dupont@example.com"
+  },
+  {
+    "id": 18,
+    "uid": "3f7610f4-1ef9-4b83-95cd-6f1925896665",
+    "name": "Vidal",
+    "firstName": "Ethan",
+    "age": 14,
+    "lastLessonDate": 1703491200,
+    "level": 4,
+    "credit": 1,
+    "address": "1 rue de l'Église, 34400 Lunel",
+    "notes": "Très sérieux, suit un programme intensif.",
+    "ffeLicence": true,
+    "ffeLicenceValidityYear": 2025,
+    "ffeLicenceNumber": "F1122556",
+    "legalGuardianName": "Vidal",
+    "legalGuardianFirstName": "Laura",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "04 67 23 45 67",
+    "legalGuardianEmail": "laura.vidal@example.com"
+  },
+  {
+    "id": 19,
+    "uid": "63083e54-928d-4966-aa5b-8045c2372ddb",
+    "name": "Lemoine",
+    "firstName": "Arthur",
+    "age": 10,
+    "lastLessonDate": 1703404800,
+    "level": 2,
+    "credit": 9,
+    "address": "24 rue du Parc, 57000 Metz",
+    "notes": "Bonne progression sur le plat.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2026,
+    "ffeLicenceNumber": "C2233667",
+    "legalGuardianName": "Lemoine",
+    "legalGuardianFirstName": "Céline",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "03 87 12 34 56",
+    "legalGuardianEmail": "celine.lemoine@example.com"
+  },
+  {
+    "id": 20,
+    "uid": "c0fdc5a5-881b-41e5-a6e3-81cd43ccd823",
+    "name": "Colin",
+    "firstName": "Louise",
+    "age": 14,
+    "lastLessonDate": 1703318400,
+    "level": 1,
+    "credit": 13,
+    "address": "16 rue de la Liberté, 44000 Nantes",
+    "notes": "Attendrie par les chevaux, très douce.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2027,
+    "ffeLicenceNumber": "C3344778",
+    "legalGuardianName": "Colin",
+    "legalGuardianFirstName": "Bruno",
+    "legalGuardianRole": "père",
+    "legalGuardianPhoneNumber": "02 40 44 55 66",
+    "legalGuardianEmail": "bruno.colin@example.com"
+  },
+  {
+    "id": 21,
+    "uid": "2f0b4da4-aaba-4598-ab27-02a8be3025ab",
+    "name": "Aubert",
+    "firstName": "Mia",
+    "age": 3,
+    "lastLessonDate": 1703232000,
+    "level": 0,
+    "credit": 19,
+    "address": "14 rue des Mimosas, 06200 Nice",
+    "notes": "Souriante, très à l'aise avec le poney.",
+    "ffeLicence": false,
+    "ffeLicenceValidityYear": 2028,
+    "ffeLicenceNumber": "C4455889",
+    "legalGuardianName": "Aubert",
+    "legalGuardianFirstName": "Sébastien",
+    "legalGuardianRole": "père",
+    "legalGuardianPhoneNumber": "04 93 12 34 56",
+    "legalGuardianEmail": "sebastien.aubert@example.com"
+  },
+  {
+    "id": 22,
+    "uid": "ee159a3c-644d-4516-9d18-7d94e341bc7e",
+    "name": "Perrot",
+    "firstName": "Noah",
+    "age": 12,
+    "lastLessonDate": 1703145600,
+    "level": 3,
+    "credit": 6,
+    "address": "27 rue du Château, 21000 Dijon",
+    "notes": "Bon cavalier, travaille les transitions.",
+    "ffeLicence": true,
+    "ffeLicenceValidityYear": 2026,
+    "ffeLicenceNumber": "F5566990",
+    "legalGuardianName": "Perrot",
+    "legalGuardianFirstName": "Hélène",
+    "legalGuardianRole": "mère",
+    "legalGuardianPhoneNumber": "03 80 33 44 55",
+    "legalGuardianEmail": "helene.perrot"
  }
 ]
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.56686,0,0,1.64536,84.9996,67.1819)">
+        <rect x="-54.249" y="-40.831" width="653.538" height="622.357" style="fill:white;"/>
+    </g>
+    <g transform="matrix(2.11909,0,0,2.11909,-654.529,-701.74)">
+        <circle cx="550.487" cy="572.766" r="241.614" style="fill:rgb(255,242,214);"/>
+        <path d="M550.487,331.152C683.837,331.152 792.101,439.416 792.101,572.766C792.101,706.116 683.837,814.379 550.487,814.379C417.137,814.379 308.873,706.116 308.873,572.766C308.873,439.416 417.137,331.152 550.487,331.152ZM550.487,344.837C424.69,344.837 322.559,446.969 322.559,572.766C322.559,698.563 424.69,800.694 550.487,800.694C676.284,800.694 778.416,698.563 778.416,572.766C778.416,446.969 676.284,344.837 550.487,344.837Z" style="fill:rgb(82,195,181);"/>
+    </g>
+    <g transform="matrix(6.12588,0,0,6.12588,-6849.39,-1486.99)">
+        <g id="cheekbone" transform="matrix(0.223861,0,0,0.223861,1092.98,208.568)">
+            <path d="M455.162,456.601C455.162,456.601 481.074,458.317 486.31,482.875C490.365,501.897 481.508,513.456 466.372,520.582C451.784,527.45 428.595,522.492 423.328,499.4C418.062,476.308 428.451,455.922 455.162,456.601Z" style="fill:rgb(226,187,171);"/>
+        </g>
+        <g>
+            <g id="ear" transform="matrix(0.243706,0.104843,-0.0594603,0.138215,1107.46,201.416)">
+                <path d="M362.117,355.22C370.838,355.22 378.059,357.431 377.988,363.308C377.815,377.523 371.861,371.352 362.74,373.056C354.067,374.677 346.118,370.417 346.385,363.308C346.748,353.654 353.396,355.22 362.117,355.22Z" style="fill:rgb(82,195,181);"/>
+            </g>
+            <g id="eye2" transform="matrix(0.223861,0,0,0.223861,1092.98,208.568)">
+                <path d="M468.398,382.945C469.41,383.025 470.222,383.618 470.949,384.48C476.494,391.138 481.866,398.917 482.253,406.941C482.639,414.923 473.562,422.119 464.802,418.108C456.233,414.186 450.669,404.71 446.713,396.302C446.713,396.302 446.046,394.281 447.098,393.028C448.307,391.587 450.9,391.702 451.94,393.368C456.025,399.907 459.324,408.47 466.745,412.38C471.382,414.823 478.154,411.85 475.553,403.626C473.706,397.786 470.024,392.64 465.972,387.888C465.972,387.888 464.864,386.158 465.522,384.705C466.115,383.393 468.092,382.94 468.398,382.945Z" style="fill:rgb(82,195,181);fill-rule:nonzero;"/>
+            </g>
+            <g id="eye1" transform="matrix(0.223861,0,0,0.223861,1092.98,208.568)">
+                <path d="M519.209,347.854C521.511,348.079 524.222,351.43 526.663,354.14C531.742,359.779 535.698,367.152 534.696,374.742C533.878,380.944 528.164,386.401 521.814,385.684C512.07,384.585 504.301,375.236 498.461,367.613C498.461,367.613 497.16,365.017 498.773,363.532C500.199,362.219 502.327,362.842 503.813,364.721C508.555,370.666 513.763,377.089 520.93,379.376C524.305,380.452 528.365,377.681 528.779,373.685C529.618,365.61 522.951,358.154 517.065,353.13C517.065,353.13 515.971,352.046 516.014,350.748C516.066,349.19 517.181,347.905 519.017,347.848C519.081,347.85 519.145,347.852 519.209,347.854Z" style="fill:rgb(82,195,181);fill-rule:nonzero;"/>
+            </g>
+            <g id="nose1" transform="matrix(0.223861,0,0,0.223861,1092.98,208.568)">
+                <path d="M702.332,364.259C702.332,364.259 707.901,363.158 712.828,372.411C716.259,378.855 714.297,381.225 711.847,383.012C709.397,384.798 705.998,381.343 703.496,377.663C700.993,373.984 695.202,367.931 702.332,364.259Z" style="fill:rgb(82,195,181);"/>
+            </g>
+            <g id="nose2" transform="matrix(0.223861,0,0,0.223861,1092.98,208.568)">
+                <path d="M727.907,353.291C727.907,353.291 735.815,362.29 735.962,365.889C736.109,369.488 733.025,373.245 727.264,368.587C721.504,363.93 716.692,357.177 721.305,353.1C725.919,349.024 726.837,353.004 727.907,353.291Z" style="fill:rgb(82,195,181);"/>
+            </g>
+            <g transform="matrix(0.223861,0,0,0.223861,1093.31,209.088)">
+                <path d="M612.529,436.83C616.513,448.526 620.687,460.27 623.115,472.351C623.508,474.306 623.892,476.288 623.708,478.255L614.747,477.417C614.908,475.688 614.176,473.434 613.651,471.261C611.074,460.591 607.558,450.147 604.012,439.738L603.882,439.358L612.397,436.443C612.441,436.572 612.485,436.701 612.529,436.83Z" style="fill:rgb(82,195,181);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0.223861,0,0,0.223861,1098.51,211.975)">
+                <path d="M613.984,436.478C615.46,449.088 616.795,461.743 619.384,474.192C619.596,475.213 619.824,476.232 620.108,477.235L611.448,479.687C608.861,470.55 608.006,460.948 606.762,451.405C606.16,446.779 605.587,442.151 605.044,437.518L605.001,437.141L613.941,436.108C613.956,436.231 613.97,436.355 613.984,436.478Z" style="fill:rgb(82,195,181);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0.223861,0,0,0.223861,1103.77,213.628)">
+                <path d="M613.972,436.583C614.39,449.201 615.012,462.207 618.505,473.824C618.505,473.824 619.411,473.266 620.197,472.721C626.112,468.652 632.191,464.843 638.29,461.078L639.859,460.114L634.861,446.035L643.342,443.024L650.791,464.008C640.776,470.061 630.473,475.907 621.366,482.981C620.845,483.385 620.33,483.799 619.85,484.25L613.09,483.558C608.572,477.136 607.835,468.651 606.791,460.321C605.815,452.543 605.236,444.716 604.977,436.869L613.969,436.487C613.97,436.519 613.971,436.551 613.972,436.583Z" style="fill:rgb(82,195,181);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0.223861,0,0,0.223861,1092.98,208.568)">
+                <path d="M491.153,252.086C496.853,252.28 500.797,258.194 502.817,262.775C507.569,273.553 508.924,285.559 510.037,297.475C526.587,315.323 544.177,332.86 566.728,341.715C590.585,351.084 618.118,347.797 641.772,336.951C659.488,328.828 677.301,320.482 697.04,317.632C712.707,315.371 729.633,317.753 742.198,329.255C754.954,340.932 761.469,357.853 766.295,374.077C766.347,374.251 766.7,375.445 766.734,375.569C773.103,399.116 770.867,427.062 756.654,448.076C752.098,454.812 746.487,460.806 740.236,466.037C739.339,466.898 738.375,467.681 737.359,468.395C727.458,475.361 714.566,475.297 703.291,474.212C684.616,472.413 666.362,466.796 648.504,460.408C628.53,453.264 609.055,444.779 589.986,435.504L589.88,435.452C605.427,466.305 633.67,490.51 667.382,499.573L668.762,500.25C670.703,502.426 670.836,505.366 667.433,507.471C642.837,522.682 615.522,535.537 601.425,563.183C588.493,588.543 587.001,617.966 588.307,645.426C589.602,672.641 594.111,699.603 599.88,726.415L599.904,727.976L599.33,729.427L598.243,730.548C596.821,731.163 596.8,731.168 595.25,731.192L593.799,730.617L592.679,729.531L592.059,728.098C582.803,685.084 575.579,640.552 582.444,597.624C586.254,573.803 596.014,550.265 613.983,533.159C626.383,521.354 641.788,513.131 656.548,504.636C656.548,504.636 652.921,503.362 649.839,502.103C618.624,489.343 592.933,463.487 579.641,432.435C578.92,430.75 577.972,428.205 577.972,428.205L577.764,426.642L578.176,425.119L579.145,423.875L580.52,423.101L582.086,422.919L583.602,423.357C584.065,423.598 584.529,423.837 584.993,424.076C616.073,439.944 647.999,453.922 681.559,462.202C694.442,465.38 707.791,468.069 720.909,466.114C732.833,464.336 742.317,454.741 749.597,444.224C762.586,425.458 764.222,400.515 759.037,377.794L758.99,377.592C754.599,362.572 749.035,347.313 738.18,336.479C733.159,331.468 726.824,327.784 719.904,326.089C704.085,322.215 687.563,326.932 672.678,332.34C660.217,336.867 648.401,343.309 636.294,347.926C616.217,355.583 593.945,358.057 573.095,352.272C545.721,344.675 523.617,323.876 504.477,303.244C503.227,301.898 502.242,299.874 501.875,296.208C500.714,284.976 499.68,273.116 494.332,263.657C492.819,260.983 491.534,257.536 487.87,262.729C481.94,271.135 480.821,282.531 480.4,293.281C480.211,298.104 480.352,302.938 480.759,307.74L480.577,309.314L479.799,310.693L478.547,311.663C475.231,312.546 471.261,312.604 467.523,313.263C440.621,318.006 414.087,328.676 393.191,345.619C388.921,349.081 384.929,352.893 381.383,357.108C381.383,357.108 380.846,357.639 380.846,357.639L379.292,358.415C379.292,358.415 377.552,358.458 377.552,358.458L376.034,357.813C376.034,357.813 373.895,356.051 375.713,357.556C365.819,349.634 353.759,342.587 341.602,341.801C338.517,341.602 335.312,342.025 333.014,344.193C328.824,348.147 328.125,355.293 330.977,360.283C335.777,368.682 346.593,372.223 356.578,374.84C362.369,376.357 368.277,377.49 374.23,378.043L375.641,378.444C377.187,379.609 378.013,381.18 377.605,383.401C377.651,383.272 372.404,385.95 369.826,385.637C369.826,385.637 368.659,385.421 367.386,385.225C355.376,383.346 343.179,380.343 333.269,373.693C326.9,369.42 321.562,362.727 321.328,354.702C321.068,345.825 326.124,336.619 334.878,334.398C346.923,331.342 359.549,338.001 370.443,344.481C372.846,345.911 375.201,347.418 377.509,348.997L377.726,349.147C377.966,348.884 378.209,348.625 378.452,348.365C400.377,325.188 432.623,312.14 462.6,306.055C465.704,305.425 468.828,304.893 471.972,304.506C471.972,304.506 472.54,305.134 472.466,303.707C471.749,288.443 472.366,272.416 480.523,259.34C480.782,258.925 481.051,258.517 481.333,258.117C483.615,254.884 486.719,252.017 491.153,252.086ZM374.641,356.087L374.832,356.403C374.832,356.403 374.656,355.507 374.641,356.087Z" style="fill:rgb(82,195,181);fill-rule:nonzero;"/>
+            </g>
+            <g id="mane" transform="matrix(0.223861,0,0,0.223861,1092.98,208.568)">
+                <path d="M346.147,379.636C346.147,379.636 358.345,383.563 370.526,385.195C374.894,391.635 407.026,519.659 419.302,570.637C431.027,619.324 428.712,668.191 423.557,690.393C420.351,704.199 416.133,739.406 354.403,741.451C306.12,743.05 286.03,728.978 239.179,726.021C233.688,725.674 230.816,725.972 221.936,727.711C214.202,731.118 213.243,724.898 215.113,722.111C216.982,719.324 257.802,675.314 290.662,668.436C262.483,663.847 229.927,646.98 209.904,654.98C202.664,657.873 196.042,655.507 206.724,645.263C218.013,634.435 235.141,621.267 269.949,606.026C304.757,590.786 313.764,583.55 317.35,580.531C293.548,583.918 261.099,576.922 240.556,566.241C235.199,563.446 238.863,559.621 240.235,559.398C262.917,555.706 291.286,532.505 306.109,515.47C281.904,522.733 261.954,523.253 234.839,509.837C229.523,506.541 216.978,500.02 207.859,484.986C205.61,481.512 207.326,478.606 211.937,479.303C233.102,484.511 266.814,475.206 294.331,445.753C319.919,408.546 332.29,387.468 346.147,379.636Z" style="fill:rgb(82,195,181);"/>
+            </g>
+            <g id="hair" transform="matrix(0.223861,0,0,0.223861,1092.98,208.568)">
+                <path d="M378.02,348.91C378.02,348.91 393.692,295.077 493.949,299.669C548.918,298.605 555.834,270.067 564.244,274.045C569.122,276.352 561.666,331.843 496.429,344.569C459.101,379.131 419.878,366.689 406.944,363.55C394.01,360.412 391.555,354.265 380.548,357.599C379.964,354.15 378.02,348.91 378.02,348.91Z" style="fill:rgb(82,195,181);"/>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" transform="matrix(4.51012,0,0,4,-12.0809,-10)">
+        <rect x="2.679" y="2.5" width="5.321" height="6" style="fill:none;"/>
+    </g>
+    <g id="cancel" transform="matrix(1,0,0,1,12,12)">
+        <g transform="matrix(1,0,0,1,-12,-12)">
+            <path d="M12,2C17.5,2 22,6.5 22,12C22,17.5 17.5,22 12,22C6.5,22 2,17.5 2,12C2,6.5 6.5,2 12,2M12,4C10.1,4 8.4,4.6 7.1,5.7L18.3,16.9C19.3,15.5 20,13.8 20,12C20,7.6 16.4,4 12,4M16.9,18.3L5.7,7.1C4.6,8.4 4,10.1 4,12C4,16.4 7.6,20 12,20C13.9,20 15.6,19.4 16.9,18.3Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" x="0" y="0" width="24" height="24" style="fill:none;"/><path id="certificate" d="M4,3c-1.11,0 -2,0.89 -2,2l0,10c0,1.097 0.903,2 2,2l8,0l0,5l3,-3l3,3l0,-5l2,0c1.097,0 2,-0.903 2,-2l0,-10c0,-1.097 -0.903,-2 -2,-2l-16,0m8,2l3,2l3,-2l0,3.5l3,1.5l-3,1.5l0,3.5l-3,-2l-3,2l0,-3.5l-3,-1.5l3,-1.5l0,-3.5m-8,0l5,0l0,2l-5,0l0,-2m0,4l3,0l0,2l-3,0l0,-2m0,4l5,0l0,2l-5,0l0,-2Z" style="fill-rule:nonzero;"/></svg>
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" transform="matrix(4.51012,0,0,4,-12.0809,-10)">
+        <rect x="2.679" y="2.5" width="5.321" height="6" style="fill:none;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,12,12)">
+        <g transform="matrix(1,0,0,1,-12,-12)">
+            <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" transform="matrix(4.51012,0,0,4,-12.0809,-10)">
+        <rect x="2.679" y="2.5" width="5.321" height="6" style="fill:none;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0.25,0.25)">
+        <path d="M9.5,3C13.066,3 16,5.934 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14L15.5,14L20.5,19L19,20.5L14,15.5L14,14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16C5.934,16 3,13.066 3,9.5C3,5.934 5.934,3 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" x="0" y="0" width="24" height="24" style="fill:none;"/><path d="M3,6l18,0l0,2l-18,0l0,-2m0,5l18,0l0,2l-18,0l0,-2m0,5l18,0l0,2l-18,0l0,-2Z" style="fill-rule:nonzero;"/></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" x="0" y="0" width="24" height="24" style="fill:none;"/><path id="rider" d="M10,3.5c0,-0.83 0.67,-1.5 1.5,-1.5c0.83,0 1.5,0.67 1.5,1.5c0,0.83 -0.67,1.5 -1.5,1.5c-0.83,0 -1.5,-0.67 -1.5,-1.5m12,4.5l0,3.5l-1.03,0.35c-0.17,1.21 -1.21,2.15 -2.47,2.15l-0.08,0c-0.14,0.68 -0.47,1.29 -0.92,1.78l0,6.22l-2.5,0l0,-5l-0.25,0c-0.21,0 -0.42,-0.03 -0.62,-0.06l-4.44,-0.74l-1.12,2.01l0.75,3.79l-2.54,-0l-0.78,-3.75c-0.03,-0.3 0,-0.6 0.16,-0.86l1.02,-1.81c-0.98,-0.55 -1.65,-1.58 -1.68,-2.77c-0.04,0.15 -0.06,0.37 -0.03,0.69c0.03,0.44 0.14,1.09 0.07,1.81c-0.04,0.72 -0.37,1.46 -0.79,1.95c-0.43,0.49 -0.9,0.83 -1.4,1.09l-0.7,-0.7c0.19,-0.47 0.38,-0.89 0.42,-1.28c0.06,-0.37 -0.01,-0.67 -0.12,-0.94l-0.53,-1.13c-0.21,-0.51 -0.47,-1.25 -0.42,-2.12c0.03,-0.85 0.5,-1.96 1.39,-2.57c0.9,-0.61 1.87,-0.7 2.66,-0.53c0.5,0.1 1.01,0.34 1.45,0.68c0.37,-0.17 0.8,-0.26 1.25,-0.26l0.25,-0l0,-1.39c0,-1 0.68,-1.92 1.66,-2.08c1.26,-0.21 2.34,0.76 2.34,1.97l0,1.5l1.5,-0l0,-0.5c0,-2.21 1.79,-4 4,-4l3.5,-0l-0.89,1.34c0.54,0.36 0.89,0.97 0.89,1.66m-2,3.2l-1.04,-1.66c-0.13,-0.21 -0.46,-0.12 -0.46,0.13l0,3.33c0.83,-0 1.5,-0.67 1.5,-1.5l0,-0.3Z" style="fill-rule:nonzero;"/></svg>
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" transform="matrix(4.51012,0,0,4,-12.0809,-10)">
+        <rect x="2.679" y="2.5" width="5.321" height="6" style="fill:none;"/>
+    </g>
+    <g id="ticket-1" serif:id="ticket 1" transform="matrix(1,0,0,1,0,-0.5)">
+        <path d="M2,5L22,5L22,20L2,20L2,5ZM20,18L20,7L4,7L4,18L20,18ZM17,8C17,9.097 17.903,10 19,10L19,15C17.903,15 17,15.903 17,17L7,17C7,15.903 6.097,15 5,15L5,10C6.097,10 7,9.097 7,8L17,8ZM11.516,10.48L11.516,15.61L12.596,15.61L12.596,9.238L11.615,9.238L9.689,10.84L10.319,11.587L11.516,10.48Z"/>
+    </g>
+</svg>
@@ -7,9 +7,9 @@
 	<window allow-high-dpi="true"/>
 	<window fps="60"/>
 	<window fps="0" if="html5"/>
-	<window background="#c8c1bd" 
+	<window background="#ffffff" 
 	width="500" 
-	height="800" 
+	height="900" 
 	orientation="portrait" />
 	
 	<source path="src"/>
@@ -19,17 +19,35 @@
 	<haxelib name="feathersui"/>
 	<haxelib name="feathersui-cairngorm"/>
 	<haxelib name="hx-color-trace"/>
+	<haxelib name="svg" />
+	<haxelib name="haxe-strings" />
+	<haxelib name="fuzzaldrin" />
+	<haxelib name="bindx2" />
+	<haxelib name="mxhx-feathersui" />
+	<haxelib name="mxhx-component" />

-	<icon path="assets/icons/icon.svg"/>
+	<icon path="assets/icons/app_icon.svg"/>

 	<assets path="assets">
-		<font path="fonts/Montserrat/MontserratLight300.ttf" id="MontserratLight300" />	
-		<font path="fonts/Montserrat/MontserratRegular400.ttf" id="MontserratRegular400" />	
-    	<font path="fonts/Montserrat/MontserratMedium500.ttf" id="MontserratMedium500" />
-		<font path="fonts/Montserrat/MontserratBold700.ttf" id="MontserratBold700" />
+		<font path="fonts/Montserrat/Montserrat Light.ttf" id="Montserrat Light" embed="true"/>	
+		<font path="fonts/Montserrat/Montserrat Regular.ttf" id="Montserrat Regular" embed="true"/>	
+    	<font path="fonts/Montserrat/Montserrat Medium.ttf" id="Montserrat Medium" embed="true"/>
+		<font path="fonts/Montserrat/Montserrat Bold.ttf" id="Montserrat Bold" embed="true"/>
 	</assets>

 	<!-- copies data/Employees.xml to output -->
 	<assets path="assets/data" rename="data" embed="false"/>
+	<assets path="assets/bitmaps" rename="bitmaps" embed="true"/>
+	<assets path="assets/vector" rename="vector" embed="true"/>
+
+	<!-- <config:android target-sdk-version="30"/> -->
+	<!-- <config:android build-tools-version="30" /> -->
+	<!-- <config:android target-sdk-version="35" gradle-version="8.9" gradle-plugin="8.7.3" /> -->
+	<config:android permission="android.permission.INTERNET" />
+	<config:android permission="android.permission.ACCESS_NETWORK_STATE" />
+
+	<define name="mxhx_disable_experimental_warning"/>
+
+

 </project>
@@ -1,39 +1,39 @@
-import control.AppController;
+import ui.LPTCTheme;
+import feathers.style.Theme;
+import hx.strings.RandomStrings;
+import utils.StringUtils;
+import view.RiderCardDrawer;
+import openfl.system.Security;
 import business.Services;
-import model.AppModelLocator;
 import com.adobe.cairngorm.control.CairngormEventDispatcher;
+import control.AppController;
 import control.LoadRidersEvent;
-import feathers.events.FeathersEvent;
-import feathers.layout.VerticalAlign;
-import components.NekoRectangle;
 import feathers.controls.Application;
-import feathers.controls.Label;
-import feathers.controls.LayoutGroup;
-import feathers.controls.Panel;
-import feathers.layout.AnchorLayout;
-import feathers.layout.AnchorLayoutData;
-import feathers.text.TextFormat;
-import model.Constants;
-import openfl.Assets;
-import openfl.text.Font;
+import feathers.events.FeathersEvent;
+import model.AppModelLocator;
+import openfl.events.Event;
 import t9.util.ColorTraces.*;
+import view.MainDrawer;
 import view.MainPanel;

 class LPTCManager2026 extends Application {
 	
-	private var model:AppModelLocator = AppModelLocator.getInstance();
-	private var services:Services = new Services();
-	private var appController:AppController = new AppController();
-	private var mainPanel:MainPanel = new MainPanel();
-
-	// private var nav:StackNavigator;
+	private var model:AppModelLocator;
+	private var services:Services;
+	private var appController:AppController;
+	private var mainPanel:MainPanel;
+	private var md:MainDrawer;
+	private var rcd:RiderCardDrawer;

 	public function new() {
-		
+		Theme.setTheme(new LPTCTheme());
 		super();

-		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+		model = AppModelLocator.getInstance();
+		services = new Services();
+		appController = new AppController();

+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
 	}

 	override private function initialize():Void {
@@ -42,57 +42,24 @@ class LPTCManager2026 extends Application {
 		stage.displayState = NORMAL;
 		stage.scaleMode = NO_SCALE;

+		/*for (i in 0...23){
+			traceYellow(RandomStrings.randomUUIDv4());
+		}*/
+
+		mainPanel = new MainPanel();
 		addChild(mainPanel);

-		/*mainPanel = new Panel();
-		mainPanel.autoSizeMode = STAGE;
-		mainPanel.backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3);
+		md = new MainDrawer();
+		addChild(md);

-		// ############################################################################################# HEADER
-		var header = new LayoutGroup();
-		header.autoSizeMode = CONTENT;
-		header.backgroundSkin = new NekoRectangle(Constants.HERO_COLOR, 0, 0, Std.int(stage.stageWidth * Constants.MAIN_HEADER_WIDTH_RATIO), Std.int(stage.stageHeight * Constants.MAIN_HEADER_HEIGHT_RATIO));
-		header.variant = LayoutGroup.VARIANT_TOOL_BAR;
-		header.layout = new AnchorLayout();
+		rcd = new RiderCardDrawer();
+		addChild(rcd);

-		var title = new Label();
-		title.backgroundSkin = new NekoRectangle(Constants.ACCENT_COLOR2, 0, 0, 200, 80);
-		title.verticalAlign = VerticalAlign.MIDDLE;
-		title.text = "Header";
-		title.embedFonts = true;
-		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
+		model.addEventListener(AppModelLocator.DRAWER_STATE_CHANGE, onDrawerStateChange);
+		model.addEventListener(AppModelLocator.RIDER_SELECT_CHANGE, onRiderSelectChange);
 		
-		var tf:TextFormat = new TextFormat(fnt.fontName, Std.int(stage.stageHeight * Constants.MAIN_HEADER_HEIGHT_RATIO * .1), Constants.MAIN_COLOR3);
-		title.textFormat =  tf;
 		
-		title.variant = Label.VARIANT_HEADING;
-		title.layoutData = AnchorLayoutData.center();
-		header.addChild(title);
-
-		mainPanel.header = header;
-
-		// ############################################################################################# FOOTER
-		var footer = new LayoutGroup();
-
-		footer.autoSizeMode = CONTENT;
-		footer.backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR2, 0, 0, stage.stageWidth, Std.int(stage.stageHeight * 10 / 100));
-		footer.variant = LayoutGroup.VARIANT_TOOL_BAR;
-		footer.layout = new AnchorLayout();
-
-		var title = new Label();
-		title.text = "Footer";
-		//title.embedFonts = true;
-		title.variant = Label.VARIANT_HEADING;
-		title.layoutData = AnchorLayoutData.center();
-		footer.addChild(title);
-
-		mainPanel.footer = footer;
-
-		addChild(mainPanel);*/
-
-		// nav = new StackNavigator();
-
-		traceBlue(this + " --> initialize()");
+		//traceBlue(this + " --> initialize()");
 	}

 	private function loadRiders():Void {
@@ -101,8 +68,16 @@ class LPTCManager2026 extends Application {
 		CairngormEventDispatcher.getInstance().dispatchEvent(cgEvent);
 	}

+	private function onRiderSelectChange(event:Event):Void {
+		rcd.populateAndShow();
+	}
+
+	private function onDrawerStateChange(e:Event):Void {
+		model.drawerIsOpen ? md.openDrawer() : md.closeDrawer();
+	}
+
 	private function onCreationComplete(event:FeathersEvent):Void {
-		traceBlue(this + " --> onCreationComplete()");
+		traceBlue("Application --> onCreationComplete()");
 		loadRiders();
 	}
 }
@@ -0,0 +1,15 @@
+package command;
+
+import model.Constants;
+import com.adobe.cairngorm.commands.ICommand;
+import com.adobe.cairngorm.control.CairngormEvent;
+import model.AppModelLocator;
+import t9.util.ColorTraces.*;
+
+class CloseDrawerCommand implements ICommand {
+	private var model = AppModelLocator.getInstance();
+
+	public function execute(e:CairngormEvent):Void {
+		model.drawerIsOpen = false;
+	}
+}
@@ -1,8 +1,9 @@
 package command;

+import openfl.utils.Object;
 import t9.util.ColorTraces;
 import openfl.Vector;
-import vo.Rider;
+import vo.RiderVO;
 import feathers.data.ArrayCollection;
 import openfl.Lib;
 import haxe.DynamicAccess;
@@ -29,27 +30,123 @@ class LoadRidersCommand implements ICommand implements IResponder {
 	public function result(rpcEvent:Dynamic):Void {

        // populate the riders DP in the model locator with the JSON results from the service call
-        var riders:Array<Rider> = cast(rpcEvent, ResultEvent).result;
+
+        var data:Array<Dynamic> = cast(rpcEvent, ResultEvent).result;
+		var riders:Array<RiderVO> = data.map((r:Dynamic) -> {
+
+			final id:Int = Std.parseInt(r.id);
+			final uid:String = r.uid;
+			final name:String = r.name;
+			final firstName:String = r.firstName;
+			final age:Int = Std.parseInt(r.age);
+			final lastLessonDate:Int = Std.parseInt(r.lastLessonDate);
+			final level:Int = Std.parseInt(r.level);
+			final credit:Int = Std.parseInt(r.credit);
+			final address:String = r.address;
+			final notes:String = r.notes;
+			final ffeLicence:Bool = stringToBool(r.ffeLicence);
+			final ffeLicenceValidityYear:Int = Std.parseInt(r.ffeLicenceValidityYear);
+			final ffeLicenceNumber:String = r.ffeLicenceNumber;
+			final legalGuardianName:String = r.legalGuardianName;
+			final legalGuardianFirstName:String = r.legalGuardianFirstName;
+			final legalGuardianRole:String = r.legalGuardianRole;
+			final legalGuardianPhoneNumber:String = r.legalGuardianPhoneNumber;
+			final legalGuardianEmail:String = r.legalGuardianEmail;
+
+			return new RiderVO(id, uid, name, firstName, age, lastLessonDate, level, credit, address, notes, ffeLicence, ffeLicenceValidityYear,ffeLicenceNumber,legalGuardianName,legalGuardianFirstName,legalGuardianRole,legalGuardianPhoneNumber,legalGuardianEmail);
+		});
+
 		model.ridersListDP = new ArrayCollection(riders);

-        traceGreen("ridersListDP.length --> " + model.ridersListDP.length);
+		/*var riders:Array<RiderVO> = [];

-        /*var data:DynamicAccess<Dynamic> = Json.parse(cast(rpcEvent, ResultEvent).result);
-        */
+		for (i in 0...data.length) {
+			var r:Object = data[i];

-        /*var data:DynamicAccess<Dynamic> = Json.parse(e.target.data);
+			final id:Int = Std.parseInt(r.id);
+			final name:String = r.name;
+			final firstName:String = r.firstName;
+			final age:Int = Std.parseInt(r.age);
+			final lastLessonDate:Int = Std.parseInt(r.lastLessonDate);
+			final level:Int = Std.parseInt(r.level);
+			final credit:Int = Std.parseInt(r.credit);
+			final address:String = r.address;
+			final notes:String = r.notes;
+			final ffeLicence:Bool = stringToBool(r.ffeLicence);
+			final ffeLicenceValidityYear:Int = Std.parseInt(r.ffeLicenceValidityYear);
+			final ffeLicenceNumber:String = r.ffeLicenceNumber;
+			final legalGuardianName:String = r.legalGuardianName;
+			final legalGuardianFirstName:String = r.legalGuardianFirstName;
+			final legalGuardianRole:String = r.legalGuardianRole;
+			final legalGuardianPhoneNumber:String = r.legalGuardianPhoneNumber;
+			final legalGuardianEmail:String = r.legalGuardianEmail;
+
+			final rider:RiderVO = new RiderVO(id, 
+											name, 
+											firstName, 
+											age, 
+											lastLessonDate, 
+											level, credit, 
+											address, 
+											notes, 
+											ffeLicence, 
+											ffeLicenceValidityYear,
+											ffeLicenceNumber,
+											legalGuardianName,
+											legalGuardianFirstName,
+											legalGuardianRole,
+											legalGuardianPhoneNumber,
+											legalGuardianEmail
+											);
+			riders.push(rider);
+		}*/
+
+		/*var riders:Array<RiderVO> = cast(rpcEvent, ResultEvent).result;
+		model.ridersListDP = new ArrayCollection(riders);*/
+
+		//trace(model.ridersListDP.get(5).firstName);
+        //traceGreen("ridersListDP.length --> " + model.ridersListDP.length);
+		//var arr:Array<RiderVO> = [for (n in data) cast(n, RiderVO)];
+
+		/*for(v in data){
+			//var rider:RiderVO = new RiderVO();
+			//var id:Int = Std.parseInt();
+			traceCyan(v[]);
+
+		}*/
+
+		/*for (key => value in riders){
+            //ConfigValues.data[key] = value;
+			traceMagenta(key + " / " + riders[key]);
+        }*/
+
+		/*var rac:ArrayCollection<RiderVO> = new ArrayCollection();
+		for (v in riders) {
+			//var rider:RiderVO = cast v;
+			rac.add(v);
+		}
+		model.ridersListDP = rac;*/
+
+        /*
+		var data:DynamicAccess<Dynamic> = Json.parse(cast(rpcEvent, ResultEvent).result);
+		var riders:Array<RiderVO> = cast(rpcEvent, ResultEvent).result;
+		var data:DynamicAccess<Dynamic> = Json.parse(e.target.data);
        for (key => value in data){
            ConfigValues.data[key] = value;
-        } */
-
+        } 
+		*/

+	}

+	private function stringToBool(str) {
+		var boolValue:Bool = (str == "true") ? true : false;
+		return boolValue;
 	}

 	// this is called when the delegate receives a fault from the service
 	public function fault(rpcEvent:Dynamic):Void {
 		// store an error message in the model locator
 		// labels, alerts, etc can bind to this to notify the user of errors
-		model.errorStatus = "Fault occured in LoadEmployeesCommand.";
+		model.errorStatus = "Fault occured in LoadRidersCommand.";
 	}
 }
@@ -0,0 +1,15 @@
+package command;
+
+import model.Constants;
+import com.adobe.cairngorm.commands.ICommand;
+import com.adobe.cairngorm.control.CairngormEvent;
+import model.AppModelLocator;
+import t9.util.ColorTraces.*;
+
+class OpenDrawerCommand implements ICommand {
+	private var model = AppModelLocator.getInstance();
+
+	public function execute(e:CairngormEvent):Void {
+		model.drawerIsOpen = true;
+	}
+}
@@ -0,0 +1,15 @@
+package command;
+
+import com.adobe.cairngorm.commands.ICommand;
+import com.adobe.cairngorm.control.CairngormEvent;
+import control.RiderSelectEvent;
+import model.AppModelLocator;
+
+class RiderSelectCommand implements ICommand {
+	private var model = AppModelLocator.getInstance();
+
+	public function execute(ce:CairngormEvent):Void {
+		// set the selectedRider property in the model locator with the details from the ListView item selected by user
+		model.selectedRider = cast(ce, RiderSelectEvent).selectedRider;
+	}
+}
@@ -0,0 +1,48 @@
+package components;
+
+import feathers.skins.RectangleSkin;
+import feathers.controls.Button;
+import format.SVG;
+import openfl.display.Bitmap;
+import openfl.display.BitmapData;
+import openfl.display.Shape;
+import openfl.geom.ColorTransform;
+
+class IconButton extends Button {
+
+    private var svgIconPath:String;
+    private var svgIcon:Shape;
+    private var upColor:Int;
+
+	public function new(pSvgIconPath:String = null, pUpColor:Int = 0x000000) {
+		super();
+
+        svgIconPath = pSvgIconPath;
+        upColor = pUpColor;
+	}
+
+    override private function initialize():Void {
+        super.initialize();
+
+        iconPosition = TOP;
+        //backgroundSkin = new Bitmap(new BitmapData(10, 10, true, 0xFF00FF));
+        backgroundSkin = new RectangleSkin(SolidColor( 0xFF0000, 0));
+
+        // icon
+        if(svgIconPath != null){
+            svgIcon = new Shape();
+            colorizeSvgIcon(upColor);
+            new SVG(svgIconPath).render(svgIcon.graphics);
+            icon = svgIcon;
+            icon.width = icon.height = 40;
+        }
+    }
+
+    private function colorizeSvgIcon(pColor:Int) {
+        
+        var ct = new ColorTransform();
+        ct.color = pColor;
+        svgIcon.transform.colorTransform = ct;
+    }
+
+}
@@ -1,13 +0,0 @@
-package components;
-
-import openfl.display.Shape;
-
-class NekoRectangle extends Shape {
-	public function new(pColor:Int = 0xFF0000, pX:Int = 0, pY:Int = 0, pWidth:Int = 10, pHeight:Int = 10) {
-		super();
-
-        graphics.beginFill(pColor);
-		graphics.drawRect(pX, pY, pWidth, pHeight);
-		graphics.endFill();
-	}
-}
@@ -0,0 +1,65 @@
+package components;
+
+import model.String.Strings;
+import haxe.macro.Expr.Case;
+import feathers.text.TextFormat;
+import openfl.Assets;
+import openfl.text.Font;
+import feathers.controls.Label;
+import feathers.layout.HorizontalLayout;
+import openfl.display.Shape;
+import model.Constants;
+import feathers.skins.RectangleSkin;
+import feathers.controls.LayoutGroup;
+
+class RidersListRendererAccessory extends LayoutGroup {
+	private var riderCredit:Int;
+
+	public function new(pRiderCredit:Int = 0) {
+		super();
+		riderCredit = pRiderCredit;
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		var l:HorizontalLayout = new HorizontalLayout();
+		// l.setPadding(Std.int(headerHeight * .1));
+		l.verticalAlign = MIDDLE;
+		l.gap = 10;
+		layout = l;
+
+		backgroundSkin = new RectangleSkin(SolidColor(Constants.PURE_WHITE, 0));
+
+		// Title label
+		var lbl1 = new Label();
+
+		// lbl1.layoutData = ld1;
+		// lb1.backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
+		// lb1.verticalAlign = VerticalAlign.TOP;
+
+		var iconColor:Int;
+		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
+
+		if (riderCredit <= Constants.CREDIT_ULTRA_LOW_LIMIT) {
+			iconColor = Constants.ALARM;
+		} else if (riderCredit <= Constants.CREDIT_LOW_LIMIT) {
+			iconColor = Constants.ALERT;
+		} else if (riderCredit <= Constants.CREDIT_AVERAGE_LIMIT) {
+			iconColor = Constants.WARNING;
+		} else {
+			iconColor = Constants.INFO;
+		}
+
+		lbl1.text = Strings.RL_S1 + Std.string(riderCredit);
+		lbl1.embedFonts = true;
+		lbl1.textFormat = new TextFormat(fnt.fontName, 14, Constants.MAIN_COLOR1);
+		addChild(lbl1);
+
+		var s:Shape = new Shape();
+		s.graphics.beginFill(iconColor, 1);
+		s.graphics.drawCircle(10, 10, 10);
+		s.graphics.endFill();
+		addChild(s);
+	}
+}
@@ -0,0 +1,77 @@
+package components;
+
+import model.AppModelLocator;
+import openfl.display.Bitmap;
+import openfl.system.ApplicationDomain;
+import openfl.system.LoaderContext;
+import openfl.display.LoaderInfo;
+import openfl.net.URLRequest;
+import openfl.display.Loader;
+import openfl.events.Event;
+import feathers.controls.AssetLoader;
+import feathers.layout.AnchorLayoutData;
+import feathers.layout.AnchorLayout;
+import feathers.text.TextFormat;
+import openfl.Assets;
+import openfl.text.Font;
+import feathers.controls.Label;
+import feathers.layout.HorizontalLayout;
+import openfl.display.Shape;
+import model.Constants;
+import feathers.skins.RectangleSkin;
+import feathers.controls.LayoutGroup;
+import t9.util.ColorTraces.*;
+
+class RoundAvatar extends LayoutGroup {
+
+	private var avatarSize:Int;
+	private var riderUID:String;
+
+	public function new(pAvatarSize:Int = 32, pRiderUID:String) {
+		super();
+		avatarSize = pAvatarSize;
+		riderUID = pRiderUID;
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		/*var hl:HorizontalLayout = new HorizontalLayout();
+		hl.horizontalAlign = LEFT;
+		layout = hl;*/
+
+		var bkgs = new RectangleSkin(SolidColor(0xFFFFFF, 0));
+		bkgs.width = Std.int(avatarSize * 1.2);
+		bkgs.height = avatarSize;
+		backgroundSkin = bkgs;
+
+		/*var al:AssetLoader = new AssetLoader();
+        al.addEventListener(Event.COMPLETE, onLoadComplete);
+		al.sourceScale = 0.6;
+		al.source = "https://ui-avatars.com/api/?background=random&size=128";
+        addChild(al);*/
+
+		var m:Shape = new Shape();
+		m.graphics.beginFill(Std.int(Math.random() * 0xFFFFFF), 1);
+		m.graphics.drawCircle(avatarSize / 2, avatarSize / 2, avatarSize / 2);
+		m.graphics.endFill();
+		addChild(m);
+		mask = m;
+
+        var l:Loader = new Loader();
+		//l.load(new URLRequest("https://lepetittrot.com/lptcm/assets/profile-pictures/pp256/pp_test_256.jpg"));
+		l.load(new URLRequest(Constants.PROFIL_PICTURES_PATH_512 + riderUID + ".jpg"));
+        l.contentLoaderInfo.addEventListener (Event.COMPLETE, onLoadComplete);
+		addChild(l);
+		
+	}
+
+    private function onLoadComplete(e:Event) {
+
+        var l:Loader = cast(e.currentTarget, LoaderInfo).loader;
+		var bmp:Bitmap = e.currentTarget.content;
+   		bmp.smoothing = true;
+		l.content.width = l.content.height = avatarSize;
+
+    }
+}
@@ -0,0 +1,78 @@
+package components;
+
+import feathers.controls.ToggleButton;
+import feathers.skins.RectangleSkin;
+import feathers.text.TextFormat;
+import format.SVG;
+import model.Constants;
+import openfl.display.Shape;
+import openfl.events.Event;
+import openfl.geom.ColorTransform;
+import openfl.text.Font;
+import openfl.utils.Assets;
+import t9.util.ColorTraces.*;
+
+class ToolbarToggleButton extends ToggleButton {
+
+    private var svgIconPath:String;
+    private var svgIcon:Shape;
+    private var unselectedColor:Int;
+    private var selectedColor:Int;
+    private var iconSize:Int;
+    private var textSize:Int;
+
+
+	public function new(pSvgIconPath:String = null, 
+                        pUnselectedColor:Int = 0x00FF00, 
+                        pSelectedColor:Int = 0x000000,
+                        pIconSize:Int = 40,
+                        pTextSize:Int = 16) {
+        super();
+
+        svgIconPath = pSvgIconPath;
+        unselectedColor = pSelectedColor;
+        selectedColor = pUnselectedColor;
+        iconSize = pIconSize;
+        textSize = pTextSize;
+
+        //traceRed("iconSize : " + iconSize + " / textSize : " + textSize);
+	}
+
+    override private function initialize():Void {
+        super.initialize();
+
+        iconPosition = TOP;
+        embedFonts = true;
+        backgroundSkin = new RectangleSkin(SolidColor( 0xFF0000, 0));
+
+        // icon
+        if(svgIconPath != null){
+            svgIcon = new Shape();
+            colorizeIcon(unselectedColor);
+            new SVG(svgIconPath).render(svgIcon.graphics);
+            icon = svgIcon;
+            icon.width = icon.height = iconSize;
+
+            iconOffsetY = 0;
+        }
+        
+        // text
+        var fnt:Font = Assets.getFont(Constants.MONTSERRAT_REGULAR_400);
+        textFormat = new TextFormat(fnt.fontName, textSize, unselectedColor);
+        selectedTextFormat = new TextFormat(fnt.fontName, textSize, selectedColor);
+
+        addEventListener(Event.CHANGE, onButtonStateChange);
+
+    }
+
+    private function colorizeIcon(pColor:Int) {
+        
+        var ct = new ColorTransform();
+        ct.color = pColor;
+        svgIcon.transform.colorTransform = ct;
+    }
+
+    private function onButtonStateChange(e:Event):Void {
+        selected ? colorizeIcon(selectedColor) : colorizeIcon(unselectedColor);
+    }
+}
@@ -0,0 +1,52 @@
+package components;
+
+import feathers.skins.RectangleSkin;
+import feathers.controls.LayoutGroup;
+import t9.util.ColorTraces.*;
+
+class VSpacer extends LayoutGroup {
+	public var spacerHeight(default, set):Int;
+	public var spacerColor(default, set):Int;
+	public var spacerAlpha(default, set):Float;
+	private var rs:RectangleSkin;
+
+	public function new(?pSpacerHeight:Int = 10, ?pSpacerColor:Int = 0xFFFFFF, ?pSpacerAlpha:Float = 0) {
+		super();
+
+		spacerHeight = pSpacerHeight;
+		spacerColor = pSpacerColor;
+		spacerAlpha = pSpacerAlpha;
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+		draw();
+	}
+
+	function set_spacerHeight(pSpacerHeight:Int) {
+		spacerHeight = pSpacerHeight;
+		draw();
+		return spacerHeight;
+	}
+
+	function set_spacerColor(pSpacerColor:Int) {
+		spacerColor = pSpacerColor;
+		draw();
+		return spacerColor;
+	}
+
+    function set_spacerAlpha(pSpacerAlpha:Float) {
+		spacerAlpha = pSpacerAlpha;
+		draw();
+		return spacerAlpha;
+	}
+
+	private function draw() {
+		backgroundSkin = null;
+		rs = null;
+
+		rs = new RectangleSkin(SolidColor(spacerColor, spacerAlpha));
+		rs.height = spacerHeight;
+		backgroundSkin = rs;
+	}
+}
@@ -1,13 +1,23 @@
 package control;

+import command.RiderSelectCommand;
+import command.CloseDrawerCommand;
 import command.LoadRidersCommand;
+import command.OpenDrawerCommand;
 import com.adobe.cairngorm.control.FrontController;

 class AppController extends FrontController {
+	
 	public static final LOAD_RIDERS_EVENT = "loadRidersEvent";
+	public static final OPEN_DRAWER_EVENT = "openDrawerEvent";
+	public static final CLOSE_DRAWER_EVENT = "closeDrawerEvent";
+	public static final RIDER_SELECT_EVENT = "riderSelect";

 	public function new() {
 		super();
 		addCommand(AppController.LOAD_RIDERS_EVENT, LoadRidersCommand);
+		addCommand(AppController.OPEN_DRAWER_EVENT, OpenDrawerCommand);
+		addCommand(AppController.CLOSE_DRAWER_EVENT, CloseDrawerCommand);
+		addCommand(AppController.RIDER_SELECT_EVENT, RiderSelectCommand);
 	}
 }
@@ -0,0 +1,13 @@
+package control;
+
+import com.adobe.cairngorm.control.CairngormEvent;
+import vo.RiderVO;
+
+class RiderSelectEvent extends CairngormEvent {
+	public var selectedRider:RiderVO;
+
+	public function new(pSelectedRider:RiderVO) {
+		super(AppController.RIDER_SELECT_EVENT);
+		selectedRider = pSelectedRider;
+	}
+}
@@ -1,23 +1,27 @@
 package model;

-import vo.Rider;
+import bindx.IBindable;
+import view.RidersList;
+import vo.RiderVO;
 import feathers.data.ArrayCollection;
 import openfl.errors.Error;
 import openfl.events.Event;
 import com.adobe.cairngorm.model.IModelLocator;
 import openfl.events.EventDispatcher;
+import t9.util.ColorTraces.*;

 class AppModelLocator extends EventDispatcher implements IModelLocator {
-
 	// events constants
-    public static final VIEWING_CHANGE = "viewingChange";
-    public static final RIDERS_LIST_DP_CHANGE = "ridersListDPChange";
-
+	public static final VIEWING_CHANGE:String = "viewingChange";
+	public static final RIDERS_LIST_DP_CHANGE:String = "ridersListDPChange";
+	public static final DRAWER_STATE_CHANGE:String = "drawerStateChange";
+	public static final RIDER_SELECT_CHANGE:String = "riderSelectChange";

 	// this instance stores a static reference to itself
 	private static var model:AppModelLocator;

 	// available values for the main viewstack defined as constants to help uncover errors at compile time instead of run time
+	// Navigator
 	public static final ADMIN_LOGIN = 0;
 	public static final RIDERS_LIST = 1;
 	public static final RIDER_DETAIL = 2;
@@ -31,33 +35,55 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 		return viewing;
 	}

-    // rider object contains uid/passwd
-	// its value gets set at login and cleared at logout but nothing binds to it or uses it
-	// retained since it was used in the original Adobe CafeTownsend example app
-	/*public var user(default, set):User;
+	// at startup, the drawer is closed
+	public var drawerIsOpen(default, set):Bool = false;

-	private function set_user(value:User):User {
-		user = value;
-		dispatchEvent(new Event(USER_CHANGE));
-		return user;
-	}*/
+	private function set_drawerIsOpen(pIsOpen:Bool):Bool {
+		drawerIsOpen = pIsOpen;
+		dispatchEvent(new Event(AppModelLocator.DRAWER_STATE_CHANGE));
+		return drawerIsOpen;
+	}
+
+	// temporary holding space for rider we're creating or editing
+	// this gets copied into or added onto the main rider list
+	public var selectedRider(default, set):RiderVO = null;
+
+	private function set_selectedRider(pRider:RiderVO):RiderVO {
+		selectedRider = pRider;
+		dispatchEvent(new Event(AppModelLocator.RIDER_SELECT_CHANGE));
+		return selectedRider;
+	}
+
+	// update one property of the selectedRider VO
+	public function updateSelectedRiderProp(pProperty:String, pValue:Dynamic) {
+		Reflect.setField(selectedRider, pProperty, pValue);
+
+		traceYellow(Reflect.field(selectedRider, pProperty));
+	}

 	// contains the main riders list which is populated on startup
 	// mx:application's creationComplete event is mutated into a cairngorm event
 	// that calls the httpservice for the data
-	public var ridersListDP(default, set):ArrayCollection<Rider>;
+	public var ridersListDP(default, set):ArrayCollection<RiderVO>;

-    private function set_ridersListDP(value:ArrayCollection<Rider>):ArrayCollection<Rider> {
+	private function set_ridersListDP(value:ArrayCollection<RiderVO>):ArrayCollection<RiderVO> {
 		ridersListDP = value;
-		dispatchEvent(new Event(RIDERS_LIST_DP_CHANGE));
+		dispatchEvent(new Event(AppModelLocator.RIDERS_LIST_DP_CHANGE));
 		return ridersListDP;
 	}

+	public function filterRiderListDP(pTestValue:String) {
+		ridersListDP.filterFunction = function(rider:RiderVO):Bool {
+			return StringTools.contains(rider.firstName.toLowerCase(), pTestValue.toLowerCase());
+		};
+		//ridersListDP.refresh();
+		dispatchEvent(new Event(AppModelLocator.RIDERS_LIST_DP_CHANGE));
+	}
+
 	// variable to store error messages from the httpservice
 	// nothinng currently binds to it, but an Alert or the login box could to show startup errors
 	public var errorStatus:String;

-
 	// singleton: constructor only allows one model locator
 	public function new() {
 		super();
@@ -73,4 +99,7 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 		return model;
 	}

+	public function addRider(pRider:RiderVO) {
+		ridersListDP.add(pRider);
+	}
 }
@@ -1,7 +1,12 @@
 package model;

+import openfl.system.Capabilities;
+
 class Constants {

+    // Paths
+    public static final PROFIL_PICTURES_PATH_512:String = "https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/";
+
    // Colors
    public static final HERO_COLOR:Int = 0x050EB7;
    public static final ACCENT_COLOR1:Int = 0xFF9F1C;
@@ -9,18 +14,56 @@ class Constants {
    public static final MAIN_COLOR1:Int = 0x323D42;
    public static final MAIN_COLOR2:Int = 0x69808A;
    public static final MAIN_COLOR3:Int = 0xECEFF0;
+    public static final PURE_WHITE:Int = 0xFFFFFF;
+
+    public static final ALARM:Int = 0x9E59B8;
+    public static final ALERT:Int = 0xB76D4B;
+    public static final WARNING:Int = 0xB3A700;
+    public static final INFO:Int = 0x6CB583;
+
+    public static final BUTTON_UP_COLOR:Int = 0x050EB7;
+    public static final BUTTON_HOVER_COLOR:Int = 0xFF5F0F;
+    public static final BUTTON_DOWN_COLOR:Int = 0x69808A;
+    public static final BUTTON_INVERTED_UP_COLOR:Int = 0xECEFF0;
+
+    public static final LIST_SEPARATOR_COLOR:Int = 0xE1E3E4;

    // Fonts
-    public static final MONTSERRAT_LIGHT_300:String = "MontserratLight300";
-    public static final MONTSERRAT_REGULAR_400:String = "MontserratRegular400";
-    public static final MONTSERRAT_MEDIUM_500:String = "MontserratMedium500";
-    public static final MONTSERRAT_BOLD_700:String = "MontserratBold700";
+    public static final MONTSERRAT_LIGHT_300:String = "Montserrat Light";
+    public static final MONTSERRAT_REGULAR_400:String = "Montserrat Regular";
+    public static final MONTSERRAT_MEDIUM_500:String = "Montserrat Medium";
+    public static final MONTSERRAT_BOLD_700:String = "Montserrat Bold";

-    // UI Proportions against satge dimmentions
+    // Fonts sizes
+    public static final FONT_SIZE_10:Int = 10;
+    public static final FONT_SIZE_12:Int = 12;
+    public static final FONT_SIZE_14:Int = 14;
+    public static final FONT_SIZE_16:Int = 16;
+    public static final FONT_SIZE_22:Int = 22;
+    public static final FONT_SIZE_26:Int = 26;
+    
+    // UI Proportions against stage dimmensions
    public static final MAIN_HEADER_WIDTH_RATIO:Float = 1;
    public static final MAIN_HEADER_HEIGHT_RATIO:Float = 0.1;

-    private function new() {
+    // Event strings
+    public static final OPEN_DRAWER:String = "openDrawer";
+    public static final CLOSE_DRAWER:String = "closeDrawer";
+    public static final DRAWER_IS_OPEN:Bool = false;
+
+    // UI
+    // number of rows in RidersList
+    public static final RIDERS_LIST_ROWS_COUNT:Int = 8;
+    public static final BUTTONS_ICON_SIZE:Int = 32;
+    public static final GLOBAL_CORNER_RADIUS:Int = 5;
+    public static final GLOBAL_BUTTON_ICON_OFFSET:Int = -10;
+     public static final GLOBAL_PADDING:Int = 10;
+
+    // Credit limits
+    public static final CREDIT_ULTRA_LOW_LIMIT:Int = 1;
+    public static final CREDIT_LOW_LIMIT:Int = 2;
+    public static final CREDIT_AVERAGE_LIMIT:Int = 6;
+    public static final CREDIT_UP_LIMIT:Int = 10;
+

-    }
 }
@@ -0,0 +1,29 @@
+package model;
+
+import openfl.system.Capabilities;
+
+class Strings {
+
+    // MainHeader strings
+    public static final MH_S1:String = "Cavalier·e·s";
+
+    // MainFooter strings
+    public static final MF_S1:String = "Licences FFE";
+
+    // ToolBar strings
+     public static final TB_S1:String = "Recherche";
+
+    // RidersList strings
+    public static final RL_S1:String = "Crédit: ";
+
+    // RideCardDrawer strings
+    public static final RCD_S1:String = "Cours restants sur la carte : ";
+    public static final RCD_S2:String = "Décompter un cours";
+
+    // ConfirmationPanel strings
+    public static final CP_S1:String = "Confirmation";
+    public static final CP_S2:String = "Annuler";
+    public static final CP_S3:String = "Confirmer";
+    public static final CP_S4:String = "Vous allez décompter un cours pour ";
+
+}
@@ -0,0 +1,226 @@
+package ui;
+
+import feathers.controls.HProgressBar;
+import feathers.controls.TextInputState;
+import feathers.controls.TextInput;
+import openfl.Assets;
+import model.Constants;
+import feathers.text.TextFormat;
+import feathers.controls.ButtonState;
+import feathers.skins.RectangleSkin;
+import feathers.controls.Button;
+import feathers.themes.ClassVariantTheme;
+
+class LPTCTheme extends ClassVariantTheme {
+
+    public static final BUTTON_VARIANT_WHITE:String = "buttonVariantWhite";
+    public static final BUTTON_VARIANT_ORANGE:String = "buttonVariantOrange";
+
+    public static final TEXT_INPUT_VARIANT_SEARCH:String = "textInputVariantSearch";
+
+	public static final H_PROGRESS_BAR_VARIANT_INFO:String = "HProgressBarVariantInfo";
+	public static final H_PROGRESS_BAR_VARIANT_WARNING:String = "HProgressBarVariantWarning";
+	public static final H_PROGRESS_BAR_VARIANT_ALERT:String = "HProgressBarVariantAlert";
+	public static final H_PROGRESS_BAR_VARIANT_ALARM:String = "HProgressBarVariantAlarm";
+
+	public function new() {
+		super();
+
+		initialize();
+	}
+
+	private function initialize():Void {
+		// Buttons
+        styleProvider.setStyleFunction(Button, null, setButtonStyles);
+        styleProvider.setStyleFunction(Button, LPTCTheme.BUTTON_VARIANT_WHITE, setWhiteButtonStyles);
+        styleProvider.setStyleFunction(Button, LPTCTheme.BUTTON_VARIANT_ORANGE, setOrangeButtonStyles);
+
+		// TextInput
+        styleProvider.setStyleFunction(TextInput, LPTCTheme.TEXT_INPUT_VARIANT_SEARCH, setSearchTextInputStyles);
+
+		//HProgressBar
+		styleProvider.setStyleFunction(HProgressBar, LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO, setHProgressBarInfoStyles);
+		styleProvider.setStyleFunction(HProgressBar, LPTCTheme.H_PROGRESS_BAR_VARIANT_WARNING, setHProgressBarWarningStyles);
+		styleProvider.setStyleFunction(HProgressBar, LPTCTheme.H_PROGRESS_BAR_VARIANT_ALERT, setHProgressBarAlertStyles);
+		styleProvider.setStyleFunction(HProgressBar, LPTCTheme.H_PROGRESS_BAR_VARIANT_ALARM, setHProgressBarAlarmStyles);
+    }
+
+    //############################################################### BUTTONS
+	private function setButtonStyles(button:Button):Void {
+		var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = SolidColor(1.0, Constants.HERO_COLOR);
+		backgroundSkin.fill = SolidColor(Constants.HERO_COLOR);
+		backgroundSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		button.backgroundSkin = backgroundSkin;
+
+		var downSkin = new RectangleSkin();
+		downSkin.border = SolidColor(1.0, Constants.HERO_COLOR);
+		downSkin.fill = SolidColor(Constants.MAIN_COLOR3);
+		downSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		button.setSkinForState(ButtonState.DOWN, downSkin);
+
+		var format = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+		button.textFormat = format;
+
+		var downFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.HERO_COLOR);
+		button.setTextFormatForState(ButtonState.DOWN, downFormat);
+
+        button.paddingLeft = button.paddingRight = 10;
+        button.paddingTop = button.paddingBottom = 5;
+         button.iconOffsetX = Constants.GLOBAL_BUTTON_ICON_OFFSET;
+	}
+
+    private function setWhiteButtonStyles(button:Button):Void {
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = SolidColor(1.0, Constants.HERO_COLOR);
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR3);
+		backgroundSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		button.backgroundSkin = backgroundSkin;
+
+		var downSkin = new RectangleSkin();
+		downSkin.border = SolidColor(1.0, Constants.HERO_COLOR);
+		downSkin.fill = SolidColor(Constants.HERO_COLOR);
+		downSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		button.setSkinForState(ButtonState.DOWN, downSkin);
+
+		var format = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.HERO_COLOR);
+		button.textFormat = format;
+
+		var downFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+		button.setTextFormatForState(ButtonState.DOWN, downFormat);
+        
+        button.paddingLeft = button.paddingRight = 10;
+        button.paddingTop = button.paddingBottom = 5;
+        button.iconOffsetX = Constants.GLOBAL_BUTTON_ICON_OFFSET;
+    }
+
+    private function setOrangeButtonStyles(button:Button):Void {
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = SolidColor(1.0, Constants.ACCENT_COLOR2);
+		backgroundSkin.fill = SolidColor(Constants.ACCENT_COLOR2);
+		backgroundSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		button.backgroundSkin = backgroundSkin;
+
+		var downSkin = new RectangleSkin();
+		downSkin.border = SolidColor(1.0, Constants.ACCENT_COLOR2);
+		downSkin.fill = SolidColor(Constants.MAIN_COLOR3);
+		downSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		button.setSkinForState(ButtonState.DOWN, downSkin);
+
+		var format = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+		button.textFormat = format;
+
+		var downFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.ACCENT_COLOR2);
+		button.setTextFormatForState(ButtonState.DOWN, downFormat);
+        
+        button.paddingLeft = button.paddingRight = 10;
+        button.paddingTop = button.paddingBottom = 5;
+        button.iconOffsetX = Constants.GLOBAL_BUTTON_ICON_OFFSET;
+    }
+
+    //############################################################### TEXT INPUT
+    private function setSearchTextInputStyles(pTextInput:TextInput):Void {
+
+		var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = SolidColor(1, Constants.MAIN_COLOR3, .1);
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR3, 0.1);
+		backgroundSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		pTextInput.backgroundSkin = backgroundSkin;
+
+        var disabledSkin = new RectangleSkin();
+		disabledSkin.border = SolidColor(1, Constants.MAIN_COLOR3, .1);
+		disabledSkin.fill = SolidColor(Constants.MAIN_COLOR3, 0.1);
+		disabledSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		pTextInput.setSkinForState(TextInputState.DISABLED, disabledSkin);
+
+		var focusSkin = new RectangleSkin();
+		focusSkin.border = SolidColor(1, Constants.MAIN_COLOR3, .8);
+		focusSkin.fill = SolidColor(Constants.MAIN_COLOR3, 0.2);
+		focusSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		pTextInput.setSkinForState(TextInputState.FOCUSED, focusSkin);
+
+		var format:TextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+		pTextInput.textFormat = format;
+
+        var disabledFormat:TextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+        pTextInput.setTextFormatForState(TextInputState.DISABLED, disabledFormat);
+
+		var focusFormat:TextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+        pTextInput.setTextFormatForState(TextInputState.FOCUSED, focusFormat);
+
+        pTextInput.paddingLeft = pTextInput.paddingRight = 10;
+        pTextInput.paddingTop = pTextInput.paddingBottom = 5;
+
+        pTextInput.embedFonts = true;
+        
+	}
+
+	//############################################################### PROGRESS BAR
+	private function setHProgressBarInfoStyles(pHProgrssBar:HProgressBar):Void {
+
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = null;
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR1, .2);
+		backgroundSkin.height = 10;
+		backgroundSkin.cornerRadius = 4;
+		pHProgrssBar.backgroundSkin = backgroundSkin;
+
+		var fillSkin = new RectangleSkin();
+		fillSkin.border = null;
+		fillSkin.fill = SolidColor(Constants.INFO);
+		backgroundSkin.height = 10;
+		fillSkin.cornerRadius = 4;
+		pHProgrssBar.fillSkin = fillSkin;
+    }
+
+	private function setHProgressBarWarningStyles(pHProgrssBar:HProgressBar):Void {
+
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = null;
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR1, .2);
+		backgroundSkin.height = 10;
+		backgroundSkin.cornerRadius = 4;
+		pHProgrssBar.backgroundSkin = backgroundSkin;
+
+		var fillSkin = new RectangleSkin();
+		fillSkin.border = null;
+		fillSkin.fill = SolidColor(Constants.WARNING);
+		backgroundSkin.height = 10;
+		fillSkin.cornerRadius = 4;
+		pHProgrssBar.fillSkin = fillSkin;
+    }
+
+	private function setHProgressBarAlertStyles(pHProgrssBar:HProgressBar):Void {
+
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = null;
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR1, .2);
+		backgroundSkin.height = 10;
+		backgroundSkin.cornerRadius = 4;
+		pHProgrssBar.backgroundSkin = backgroundSkin;
+
+		var fillSkin = new RectangleSkin();
+		fillSkin.border = null;
+		fillSkin.fill = SolidColor(Constants.ALERT);
+		backgroundSkin.height = 10;
+		fillSkin.cornerRadius = 4;
+		pHProgrssBar.fillSkin = fillSkin;
+    }
+
+	private function setHProgressBarAlarmStyles(pHProgrssBar:HProgressBar):Void {
+
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = null;
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR1, .2);
+		backgroundSkin.height = 10;
+		backgroundSkin.cornerRadius = 4;
+		pHProgrssBar.backgroundSkin = backgroundSkin;
+
+		var fillSkin = new RectangleSkin();
+		fillSkin.border = null;
+		fillSkin.fill = SolidColor(Constants.ALARM);
+		backgroundSkin.height = 10;
+		fillSkin.cornerRadius = 4;
+		pHProgrssBar.fillSkin = fillSkin;
+    }
+}
@@ -0,0 +1,23 @@
+package ui;
+
+import openfl.Assets;
+import openfl.geom.ColorTransform;
+import format.SVG;
+import openfl.display.Shape;
+
+class SVGIconFactory {
+	public static function makeIcon(pSvgIconPath:String = null, pIconSize:Int = 64, pIconColor:Int = 0x000000):Shape {
+		
+		var svgIcon:Shape = new Shape();
+		new SVG(Assets.getText(pSvgIconPath)).render(svgIcon.graphics);
+
+        var ct = new ColorTransform();
+        ct.color = pIconColor;
+        svgIcon.transform.colorTransform = ct;
+
+		svgIcon.width = svgIcon.height = pIconSize;
+
+		return svgIcon;
+
+	}
+}
@@ -0,0 +1,37 @@
+package utils;
+
+class StringUtils {
+	/*
+		returns a random string of n characters with Hex chars (0123456789ABCDEF)
+	 */
+	static public function getRandomHexString(pStringLength:Int = 8) {
+		{
+			var chars:String = "0123456789abcdef";
+			var rndString:String = "";
+			for (i in 0...pStringLength)
+				rndString += chars.charAt(Math.round(Math.random() * chars.length));
+			return rndString;
+		}
+	}
+
+	/*
+		returns a random string of n characters within ASCII visible chars range (33 ! -> 126 ~)
+	 */
+	static public function getRandomStringFromASCII(pStringLength:Int = 8):String {
+		var rndString:String = "";
+		for (i in 0...pStringLength)
+			rndString += String.fromCharCode(Math.round(Math.random() * 93) + 33);
+		return rndString;
+	}
+
+	/*
+		returns a unique id
+	 */
+	public static function generateUID():String {
+		var s1:String = StringUtils.getRandomHexString(8);
+		var s2:String = Std.string(Date.now().getTime());
+
+		return s1 + s2.substr(s2.length - 4, 4);
+	}
+
+}
@@ -0,0 +1,126 @@
+package view;
+
+import openfl.utils.Function;
+import model.AppModelLocator;
+import model.String.Strings;
+import feathers.layout.HorizontalAlign;
+import feathers.layout.VerticalLayout;
+import openfl.text.TextFormatAlign;
+import feathers.controls.Label;
+import feathers.layout.HorizontalLayout;
+import feathers.events.TriggerEvent;
+import feathers.core.PopUpManager;
+import feathers.controls.ButtonState;
+import ui.LPTCTheme;
+import feathers.layout.VerticalAlign;
+import ui.SVGIconFactory;
+import feathers.controls.Button;
+import feathers.layout.HorizontalDistributedLayout;
+import feathers.controls.LayoutGroup;
+import openfl.Assets;
+import feathers.text.TextFormat;
+import model.Constants;
+import feathers.skins.RectangleSkin;
+import feathers.controls.Header;
+import feathers.events.FeathersEvent;
+import feathers.controls.Panel;
+import t9.util.ColorTraces.*;
+
+class ConfirmationPanel extends Panel {
+
+    private var head:Header;
+    private var foot:LayoutGroup;
+    private var b1:Button;
+    private var b2:Button;
+    private var mainLabel:Label;
+    private var confirmFunction:Function;
+
+	public function new(pB1Text:String, pB2Text:String, pConfirmFunction:Function = null) {
+		super();
+
+        head = new Header();
+
+        mainLabel = new Label();
+
+        foot = new LayoutGroup();
+
+        b1 = new Button(pB1Text);
+        b2 = new Button(pB2Text);
+
+        confirmFunction = pConfirmFunction;
+
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+        // general
+        //autoSizeMode = STAGE;
+        width = stage.stageWidth - (Constants.GLOBAL_PADDING * 2);
+        height = stage.stageHeight - (Constants.GLOBAL_PADDING * 2);
+        setPadding(Constants.GLOBAL_PADDING);
+        var hl:VerticalLayout = new VerticalLayout();
+        hl.verticalAlign = VerticalAlign.MIDDLE;
+        hl.horizontalAlign = HorizontalAlign.JUSTIFY;
+        layout = hl;
+        
+        var bkg1:RectangleSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
+        bkg1.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		backgroundSkin = bkg1;
+
+        // header
+        var bkg2:RectangleSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
+        bkg2.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+        head.backgroundSkin = bkg2;
+        head.height = Std.int(stage.stageHeight * Constants.MAIN_HEADER_HEIGHT_RATIO);
+        head.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR3);
+        head.text = Strings.CP_S1;
+        header = head;
+
+        // content
+        var mainLabelTF:TextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR1);
+        mainLabelTF.align = TextFormatAlign.CENTER;
+        mainLabel.embedFonts = true;
+        mainLabel.wordWrap = true;
+        mainLabel.textFormat = mainLabelTF;
+        mainLabel.setPadding(Constants.GLOBAL_PADDING * 8);
+        //mainLabel.backgroundSkin = new RectangleSkin(SolidColor(Constants.WARNING, 1));
+        mainLabel.text = Strings.CP_S4 + AppModelLocator.getInstance().selectedRider.firstName;
+        addChild(mainLabel);
+
+
+        // buttons
+        b1.icon = SVGIconFactory.makeIcon("vector/cancel_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR);
+        b1.setIconForState(ButtonState.DOWN, SVGIconFactory.makeIcon("vector/cancel_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3));
+        b1.variant = LPTCTheme.BUTTON_VARIANT_WHITE;
+        b1.addEventListener(TriggerEvent.TRIGGER, (e) -> {
+			PopUpManager.removePopUp(this);
+		});
+
+        b2.icon = SVGIconFactory.makeIcon("vector/check_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3);
+        b2.setIconForState(ButtonState.DOWN, SVGIconFactory.makeIcon("vector/check_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
+        b2.addEventListener(TriggerEvent.TRIGGER, (e) -> {
+			confirmFunction();
+            PopUpManager.removePopUp(this);
+		});
+
+        // footer
+        foot.height = Std.int(stage.stageHeight * Constants.MAIN_HEADER_HEIGHT_RATIO);
+        var bkg3:RectangleSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
+        bkg3.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+        foot.backgroundSkin = bkg3;
+        var hdl:HorizontalDistributedLayout = new HorizontalDistributedLayout();
+        hdl.verticalAlign = VerticalAlign.MIDDLE;
+        hdl.gap = Constants.GLOBAL_PADDING;
+        hdl.setPadding(Constants.GLOBAL_PADDING);
+        foot.layout = hdl;
+        foot.addChild(b1);
+        foot.addChild(b2);
+        footer = foot;
+	}
+
+    private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+	}
+}
@@ -0,0 +1,52 @@
+package view;
+
+import feathers.controls.Button;
+import feathers.controls.Drawer;
+import feathers.controls.LayoutGroup;
+import feathers.events.FeathersEvent;
+import feathers.events.TriggerEvent;
+import feathers.layout.VerticalLayout;
+import feathers.skins.RectangleSkin;
+import model.Constants;
+import t9.util.ColorTraces.*;
+
+class MainDrawer extends Drawer {
+
+	public static final CLOSE:String = "close";
+	public static final OPEN:String = "open";
+
+    private var openDrawerButton:Button;
+    private var closeDrawerButton:Button;
+
+	public function new() {
+		super();
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		overlaySkin = new RectangleSkin(SolidColor( Constants.HERO_COLOR, 1));
+		pullableEdge = LEFT;
+		clickOverlayToClose = false;
+
+		var d1 = new LayoutGroup();
+		var vl = new VerticalLayout();
+		vl.setPadding(10);
+		vl.horizontalAlign = CENTER;
+		vl.verticalAlign = TOP;
+		d1.layout = vl;
+		closeDrawerButton = new Button();
+		closeDrawerButton.text = "Close Drawer";
+		closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (event) -> {
+			opened = false;
+		});
+		d1.addChild(closeDrawerButton);
+
+		drawer = d1;
+	}
+
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+	}
+}
@@ -0,0 +1,57 @@
+package view;
+
+import model.String.Strings;
+import feathers.layout.Measurements;
+import feathers.skins.RectangleSkin;
+import components.ToolBarToggleButton.ToolbarToggleButton;
+import feathers.controls.LayoutGroup;
+import feathers.events.FeathersEvent;
+import feathers.layout.HorizontalDistributedLayout;
+import model.Constants;
+import openfl.Assets;
+import t9.util.ColorTraces.*;
+
+class MainFooter extends LayoutGroup {
+
+  private var btn1:ToolbarToggleButton;
+  private var btn2:ToolbarToggleButton;
+
+	public function new() {
+		super();
+
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
+		//variant = LayoutGroup.VARIANT_TOOL_BAR;
+
+		// Layout
+		var hdl:HorizontalDistributedLayout = new HorizontalDistributedLayout();
+		layout = hdl;
+
+		// Buttons
+		btn1 = new ToolbarToggleButton(Assets.getText("vector/rider_icon_black.svg"), 
+									   Constants.MAIN_COLOR2, 
+									   Constants.HERO_COLOR,
+									   30,
+									   Constants.FONT_SIZE_14);
+		btn1.text = Strings.MH_S1;
+    	addChild(btn1);
+
+    	btn2 = new ToolbarToggleButton(Assets.getText("vector/certificate_icon_black.svg"), 
+									   Constants.MAIN_COLOR2, 
+									   Constants.HERO_COLOR,
+									   30,
+									   Constants.FONT_SIZE_14);
+		btn2.text  = Strings.MF_S1;
+    	addChild(btn2);
+
+	}
+
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+	}
+}
@@ -1,23 +1,33 @@
 package view;

+import model.String.Strings;
+import haxe.macro.Expr.Constant;
+import com.adobe.cairngorm.control.CairngormEvent;
+import com.adobe.cairngorm.control.CairngormEventDispatcher;
+import components.IconButton;
+import control.AppController;
+import feathers.controls.Button;
+import feathers.controls.Label;
+import feathers.controls.LayoutGroup;
+import feathers.events.FeathersEvent;
+import feathers.events.TriggerEvent;
 import feathers.layout.HorizontalLayout;
-import feathers.layout.AnchorLayoutData;
+import feathers.skins.RectangleSkin;
 import feathers.text.TextFormat;
+import model.Constants;
 import openfl.Assets;
 import openfl.text.Font;
-import feathers.layout.VerticalAlign;
-import feathers.controls.Label;
-import feathers.layout.AnchorLayout;
-import components.NekoRectangle;
-import feathers.controls.LayoutGroup;
-import feathers.controls.Panel;
-import feathers.events.FeathersEvent;
-import model.Constants;
 import t9.util.ColorTraces.*;

 class MainHeader extends LayoutGroup {

-    private var lb1:Label;
+	private var btn1:Button;
+    private var lbl1:Label;
+
+	private var sw:Int;
+    private var sh:Int;
+    private var headerWidth:Int;
+    private var headerHeight:Int;

 	public function new() {
 		super();
@@ -28,42 +38,43 @@ class MainHeader extends LayoutGroup {
 	override private function initialize():Void {
 		super.initialize();

-        final sw:Int = stage.stageWidth;
-        final sh:Int = stage.stageHeight;
-        final headerWidth = Std.int(sw * Constants.MAIN_HEADER_WIDTH_RATIO);
-        final headerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO);
+        sw = stage.stageWidth;
+		sh = stage.stage.stageHeight;
+		headerWidth = Std.int(sw * Constants.MAIN_HEADER_WIDTH_RATIO);
+		headerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO);

 		autoSizeMode = CONTENT;
-		backgroundSkin = new NekoRectangle( Constants.HERO_COLOR, 
-                                            0, 
-                                            0, 
-                                            headerWidth, 
-                                            headerHeight);
+		backgroundSkin = new RectangleSkin(SolidColor(Constants.HERO_COLOR, 1));
 		variant = LayoutGroup.VARIANT_TOOL_BAR;

        // Layout settings
 		var l:HorizontalLayout = new HorizontalLayout();
-        l.paddingLeft = l.paddingRight = Std.int(headerHeight * .3);
-        l.paddingTop = l.paddingBottom = Std.int(headerHeight * .2);
+        l.paddingLeft = l.paddingRight = Std.int(headerHeight * .1);
+        l.paddingTop = l.paddingBottom = Std.int(headerHeight * .1);
+		l.verticalAlign = MIDDLE;
        layout = l;

+		// Menu button
+		var svgIconString:String = Assets.getText("vector/menu_icon_black.svg");
+		btn1 = new IconButton(svgIconString, Constants.MAIN_COLOR3);
+		btn1.addEventListener(TriggerEvent.TRIGGER, onMenuButtonPress);
+		addChild(btn1);
+		
        // Title label
-        lb1 = new Label();
-        //lb1.backgroundSkin = new NekoRectangle(Constants.ACCENT_COLOR2);
+        lbl1 = new Label();
+		lbl1.text = Strings.MH_S1;
+		lbl1.embedFonts = true;
+		lbl1.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR3);
+		addChild(lbl1);

-		//lb1.verticalAlign = VerticalAlign.TOP;
-		lb1.text = "Cavalier·e·s";
-		lb1.embedFonts = true;
-		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
-		
-		var tf:TextFormat = new TextFormat(fnt.fontName, Std.int(headerHeight * .4), Constants.MAIN_COLOR3);
-		lb1.textFormat =  tf;
-
-		lb1.layoutData = AnchorLayoutData.middleLeft();
-		addChild(lb1);
 	}

 	private function onCreationComplete(event:FeathersEvent):Void {
-		traceBlue(this + " --> onCreationComplete()");
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+	}
+
+	function onMenuButtonPress(e:TriggerEvent):Void {
+		var ce:CairngormEvent = new CairngormEvent(AppController.OPEN_DRAWER_EVENT);
+		CairngormEventDispatcher.getInstance().dispatchEvent(ce);
 	}
 }
@@ -1,14 +1,22 @@
 package view;

-import feathers.events.FeathersEvent;
-import model.Constants;
-import components.NekoRectangle;
+import openfl.events.Event;
 import feathers.controls.Panel;
+import feathers.controls.navigators.StackItem;
+import feathers.controls.navigators.StackNavigator;
+import feathers.events.FeathersEvent;
+import feathers.layout.AnchorLayout;
+import feathers.layout.AnchorLayoutData;
+import feathers.skins.RectangleSkin;
+import model.Constants;
 import t9.util.ColorTraces.*;

 class MainPanel extends Panel {

 	private var mh:MainHeader;
+	private var mf:MainFooter;
+	private var sn:StackNavigator;
+	private var rcd:RiderCardDrawer;

 	public function new() {
 		super();
@@ -20,13 +28,29 @@ class MainPanel extends Panel {
 		super.initialize();

 		autoSizeMode = STAGE;
-		backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3);
+		backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR2, 1));
+
+		layout = new AnchorLayout();

 		mh = new MainHeader();
-		addChild(mh);
+		header = mh;
+
+		mf = new MainFooter();
+		footer = mf;
+
+		sn = new StackNavigator();
+		//sn.autoSizeMode = STAGE;
+		sn.layoutData = AnchorLayoutData.fill();
+		sn.addItem(StackItem.withClass("ridersScreen", RidersScreen));
+		sn.rootItemID = "ridersScreen";
+		addChild(sn);
+
+		rcd = new RiderCardDrawer();
+		addChild(rcd);
+
 	}

 	private function onCreationComplete(event:FeathersEvent):Void {
-		traceBlue(this + " --> onCreationComplete()");
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );		
 	}
 }
@@ -0,0 +1,78 @@
+package view;
+
+import ui.LPTCTheme;
+import model.String.Strings;
+import feathers.text.TextFormat;
+import openfl.Assets;
+import feathers.controls.ScrollContainer;
+import feathers.controls.Drawer;
+import feathers.events.FeathersEvent;
+import feathers.skins.RectangleSkin;
+import model.AppModelLocator;
+import model.Constants;
+import t9.util.ColorTraces.*;
+
+@:build(mxhx.macros.MXHXComponent.build())
+class RiderCardDrawer extends Drawer {
+	public static final CLOSE:String = "close";
+	public static final OPEN:String = "open";
+	
+	private var appModel:AppModelLocator;
+
+	public function new() {
+		super();
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		appModel = AppModelLocator.getInstance();
+
+		overlaySkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
+		swipeOpenEnabled = false;
+		autoSizeMode = STAGE;
+		pullableEdge = TOP;
+		clickOverlayToClose = false;
+
+		/*var m = MXHXComponent.withFile('MyMXHXcomp.mxhx');
+		mainScrollContainer.addChild(m);*/
+
+		drawer = mainScrollContainer;
+	}
+
+	
+	private function onCreationComplete(e:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
+	}
+
+
+	public function populateAndShow() {
+
+		// profile picture
+		ppal.source = Constants.PROFIL_PICTURES_PATH_512 + appModel.selectedRider.uid + ".jpg";
+
+		/*firstNameLabel.text = AppModelLocator.getInstance().selectedRider.firstName;
+		nameLabel.text = AppModelLocator.getInstance().selectedRider.name;
+		creditLabel.text = Strings.RCD_S1;*/
+
+		openDrawer();
+	}
+
+	// update remaining credit label and progress bar
+	private function updateCreditUIElments(pFromValue:Dynamic, pToValue:Dynamic) {
+
+		creditLabel.text = Strings.RCD_S1 + Std.string(pToValue);
+
+		if (pToValue <= Constants.CREDIT_ULTRA_LOW_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALARM;
+		} else if (pToValue <= Constants.CREDIT_LOW_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALERT;
+		} else if (pToValue <= Constants.CREDIT_AVERAGE_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_WARNING;
+		} else {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO;
+		}
+		creditProgressBar.value = pToValue;
+	}
+}
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<f:Drawer xmlns:mx="https://ns.mxhx.dev/2024/mxhx" 
+          xmlns:f="https://ns.feathersui.com/mxhx" 
+          xmlns:components="components.*">
+
+  <!-- ################################ MAIN SCROLLCONTAINER ################################ -->
+  <f:ScrollContainer id="mainScrollContainer">
+    <f:layout>
+        <f:VerticalLayout horizontalAlign="JUSTIFY" 
+                          verticalAlign="TOP" 
+                          paddingLeft="{model.Constants.GLOBAL_PADDING}" 
+                          paddingTop="{model.Constants.GLOBAL_PADDING}"
+                          paddingRight="{model.Constants.GLOBAL_PADDING}"
+                          paddingBottom="{model.Constants.GLOBAL_PADDING}"
+                          gap="{model.Constants.GLOBAL_PADDING}"
+                          />
+    </f:layout>
+
+    <f:Button id="closeDrawerButton" text="Close drawer" click="{closeDrawer();}"/>
+
+    <!-- ################################ PROFILE PICTURE ASSETLOADER ################################ -->
+    <f:AssetLoader id="ppal"/>
+
+    <!-- <components:VSpacer/> -->
+
+    <!-- ################################ BASIC INFOS LAYOUTGROUP ################################ -->
+    <f:LayoutGroup id="basicInfosLayoutGroup">
+
+      <f:backgroundSkin>
+            <f:RectangleSkin>
+                <f:fill>
+                    <f:FillStyle.SolidColor color="0xdddddd" alpha="1"/>
+                </f:fill>
+            </f:RectangleSkin>
+        </f:backgroundSkin>
+
+        <f:layout>
+          <f:VerticalLayout horizontalAlign="JUSTIFY"/>
+        </f:layout>
+
+        <f:Label id="firstNameLabel" 
+                 paddingLeft="0" 
+                 paddingTop="0"
+                 paddingRight="0"
+                 paddingBottom="0"
+                 embedFonts="true"
+                 text="{appModel.selectedRider.firstName}">
+          <f:textFormat>
+              <f:TextFormat font="{model.Constants.MONTSERRAT_BOLD_700}" size="{model.Constants.FONT_SIZE_26}" color="{model.Constants.MAIN_COLOR1}"/>
+          </f:textFormat>
+        </f:Label>
+
+        <f:Label id="nameLabel" 
+                 paddingLeft="0" 
+                 paddingTop="0"
+                 paddingRight="0"
+                 paddingBottom="0"
+                 embedFonts="true">
+          <f:textFormat>
+              <f:TextFormat font="{model.Constants.MONTSERRAT_MEDIUM_500}" size="{model.Constants.FONT_SIZE_22}" color="{model.Constants.MAIN_COLOR2}"/>
+          </f:textFormat>
+        </f:Label>
+
+        <f:Label id="creditLabel"
+                 text="{model.Strings.RCD_S1}" 
+                 paddingLeft="0" 
+                 paddingTop="0"
+                 paddingRight="0"
+                 paddingBottom="0"
+                 embedFonts="true">
+          <f:textFormat>
+              <f:TextFormat font="{model.Constants.MONTSERRAT_MEDIUM_500}" size="{model.Constants.FONT_SIZE_16}" color="{model.Constants.MAIN_COLOR2}"/>
+          </f:textFormat>
+
+        </f:Label>
+
+        <f:HProgressBar id="creditProgressBar" value="0" minimum="0" maximum="10.0"/>
+
+    </f:LayoutGroup>
+
+  </f:ScrollContainer>
+</f:Drawer>
@@ -0,0 +1,117 @@
+package view;
+
+import feathers.data.ArrayCollection;
+import fuzzaldrin.Fuzzaldrin;
+import com.adobe.cairngorm.control.CairngormEventDispatcher;
+import components.RidersListRendererAccessory;
+import components.RoundAvatar;
+import control.RiderSelectEvent;
+import feathers.controls.ListView;
+import feathers.controls.dataRenderers.ItemRenderer; 
+import feathers.data.ListViewItemState;
+import feathers.events.FeathersEvent;
+import feathers.events.ListViewEvent;
+import feathers.skins.RectangleSkin;
+import feathers.text.TextFormat;
+import feathers.utils.DisplayObjectRecycler;
+import model.AppModelLocator;
+import model.Constants;
+import openfl.Assets;
+import openfl.events.Event;
+import t9.util.ColorTraces.*;
+import vo.RiderVO;
+
+class RidersList extends ListView {
+	private var rowHeight:Int;
+	private var localRidersListDP:ArrayCollection<RiderVO>;
+
+	public function new() {
+		super();
+		localRidersListDP = new ArrayCollection();
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+		//addEventListener(Event.CHANGE, onRiderSelect);
+		addEventListener(ListViewEvent.ITEM_TRIGGER, onRiderSelect);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		// set common properties for all renderers in the same container here
+		var recycler = DisplayObjectRecycler.withFunction(() -> {
+			
+			rowHeight = Std.int(height / Constants.RIDERS_LIST_ROWS_COUNT);
+
+			var itemRenderer = new ItemRenderer();
+			itemRenderer.height = rowHeight;
+			itemRenderer.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR1);
+			itemRenderer.secondaryTextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_12, Constants.MAIN_COLOR2);
+
+			var rs1 = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1), SolidColor(1, Constants.LIST_SEPARATOR_COLOR));
+			var rs2 = new RectangleSkin(SolidColor(Constants.LIST_SEPARATOR_COLOR, 1), SolidColor(1, Constants.LIST_SEPARATOR_COLOR));
+			itemRenderer.backgroundSkin = rs1;
+			itemRenderer.selectedBackgroundSkin = rs2;
+			itemRenderer.setSkinForState(ToggleButtonState.UP(false), rs1);
+			itemRenderer.setSkinForState(ToggleButtonState.HOVER(false), rs2);
+			itemRenderer.setSkinForState(ToggleButtonState.DOWN(false), rs2);
+			
+			return itemRenderer;
+
+		});
+
+		itemRendererRecycler = recycler;
+
+		recycler.update = (itemRenderer:ItemRenderer, state:ListViewItemState) -> {
+			var rider:RiderVO = cast(state.data, RiderVO);
+			itemRenderer.text = rider.firstName;
+			itemRenderer.secondaryText = rider.name;
+			
+			itemRenderer.icon = new RoundAvatar(Std.int(rowHeight * 0.9), rider.uid);
+
+			itemRenderer.accessoryView = new RidersListRendererAccessory(rider.credit);
+		};
+
+		recycler.reset = (itemRenderer:ItemRenderer, state:ListViewItemState) -> {
+			// TODO
+			/*var label = cast(itemRenderer.getChildByName("label"), Label);
+				var loader = cast(itemRenderer.getChildByName("loader"), AssetLoader);
+				label.text = "";
+				loader.source = null; */
+		};
+
+		AppModelLocator.getInstance().addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRiderListDpChange);
+	}
+
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
+	}
+
+	private function onRiderListDpChange(e:Event):Void {
+		
+		if(localRidersListDP.length > 0) localRidersListDP.removeAll();
+		localRidersListDP.addAll(AppModelLocator.getInstance().ridersListDP);
+		dataProvider = localRidersListDP;
+		//dataProvider = model.ridersListDP;
+
+		/*itemToText = function(item:Dynamic):String {
+			return item.firstName;
+		};*/
+		traceGreen(this + " --> onRideListDpChange()");
+
+		//var results = Fuzzaldrin.filter(cast(model.ridersListDP, Array<Dynamic>), 'Test', { key: RiderVO.FIRST_NAME });
+		//traceRed("fuzzy search : " + results);
+	}
+
+	function onRiderSelect(e:ListViewEvent):Void {
+
+		// broadcast a cairngorm event that contains the selectedItem from the List
+		var riderVO:RiderVO = cast(e.state.data, RiderVO);
+		var rse:RiderSelectEvent = new RiderSelectEvent(riderVO);
+		CairngormEventDispatcher.getInstance().dispatchEvent(rse);
+		clearSelectedRider();
+	}
+
+	// de-select any selected List items
+	private function clearSelectedRider():Void {
+		selectedIndex = -1;
+	}
+}
@@ -0,0 +1,53 @@
+package view;
+
+import lime.app.Event;
+import model.Constants;
+import feathers.skins.RectangleSkin;
+import feathers.layout.VerticalLayoutData;
+import feathers.layout.AnchorLayoutData;
+import feathers.layout.AnchorLayout;
+import feathers.events.FeathersEvent;
+import feathers.layout.VerticalLayout;
+import feathers.controls.ScrollContainer;
+import t9.util.ColorTraces.*;
+import openfl.events.Event;
+
+class RidersScreen extends ScrollContainer {
+
+    private var tb:ToolBar;
+    private var rl:RidersList;
+
+	public function new() {
+		super();
+        addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+        backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR2, 1));
+
+        var vl:VerticalLayout = new VerticalLayout();
+        vl.horizontalAlign = JUSTIFY;
+        layout = vl;
+
+        tb = new ToolBar();
+        var vld1 = new VerticalLayoutData();
+        vld1.percentHeight = 10.0;
+        tb.layoutData = vld1;
+        // TODO implémenter le fuzzy search
+        //addEventListener("ToolbarEvent",  (e:Event) -> {traceRed(e);});
+        addChild(tb);
+    
+        rl = new RidersList();
+        var vld2 = new VerticalLayoutData();
+        vld2.percentHeight = 90.0;
+        rl.layoutData = vld2;
+        addChild(rl);
+
+	}
+
+    private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+	}
+}
@@ -0,0 +1,73 @@
+package view;
+
+import model.AppModelLocator;
+import openfl.events.Event;
+import model.String.Strings;
+import ui.SVGIconFactory;
+import ui.LPTCTheme;
+import feathers.controls.TextInput;
+import feathers.layout.HorizontalLayoutData;
+import feathers.controls.Label;
+import feathers.controls.LayoutGroup;
+import feathers.events.FeathersEvent;
+import feathers.layout.HorizontalLayout;
+import feathers.skins.RectangleSkin;
+import feathers.text.TextFormat;
+import model.Constants;
+import openfl.Assets;
+import openfl.text.Font;
+import t9.util.ColorTraces.*;
+
+class ToolBar extends LayoutGroup {
+
+    private var searchTextInput:TextInput;
+
+	public function new() {
+		super();
+
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+        final sw:Int = stage.stageWidth;
+        final sh:Int = stage.stageHeight;
+        final headerWidth = Std.int(sw * Constants.MAIN_HEADER_WIDTH_RATIO);
+        final headerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO);
+
+		autoSizeMode = CONTENT;
+		backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
+
+        // Layout settings
+		var hl:HorizontalLayout = new HorizontalLayout();
+		hl.setPadding(10);
+		hl.verticalAlign = MIDDLE;
+        layout = hl;
+
+		//search field
+        searchTextInput = new TextInput();
+		var ld1 = new HorizontalLayoutData();
+		ld1.percentWidth = 100.0;
+		searchTextInput.layoutData = ld1;
+		searchTextInput.variant = LPTCTheme.TEXT_INPUT_VARIANT_SEARCH;
+		searchTextInput.leftView = SVGIconFactory.makeIcon("vector/magnifier_icon_black.svg", Constants.FONT_SIZE_22, Constants.MAIN_COLOR3);
+		searchTextInput.prompt = Strings.TB_S1;
+		searchTextInput.addEventListener(Event.CHANGE, onTextInputChange);
+
+		addChild(searchTextInput);
+		
+		//lbl1.layoutData = ld1;
+        //lb1.backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
+	}
+
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+	}
+
+	private function onTextInputChange(e:Event) {
+		var ti:TextInput = cast(e.currentTarget, TextInput);
+		AppModelLocator.getInstance().filterRiderListDP(ti.text);
+	}
+
+}
@@ -1,64 +0,0 @@
-package vo;
-
-class Rider {
-	private static var currentIndex = 1000;
-
-	public var id:Int;
-	public var name:String;
-	public var firstName:String;
-    public var age:Int;
-    public var lastLessonDate:Int;
-    public var level:Int;
-    public var credit:Int;
-    public var address:String;
-    public var notes:String;
-    public var ffeLicence:Bool;
-    public var ffeLicenceValidityYear:Int;
-    public var ffeLicenceNumber:String;
-    public var legalGuardianName:String;
-    public var legalGuardianFirstName:String;
-    public var legalGuardianRole:String;
-    public var legalGuardianPhoneNumber:Int;
-    public var legalGuardianEmail:String;
-
-
-	public function new(pId:Int = 0, 
-                        pName:String = "", 
-                        pFirstName:String = "", 
-                        pAge:Int = 0,
-                        pLastLessonDate:Int,
-                        pLevel:Int = 0,
-                        pCredit:Int = 0,
-                        pAddress:String = "",
-                        pNotes:String = "",
-                        pffeLicence:Bool = false,
-                        pffeLicenceValidityYear:Int = 0,
-                        pffeLicenceNumber:String = "",
-                        pLegalGuardianName:String = "",
-                        pLegalGuardianFirstName:String = "",
-                        pLegalGuardianRole:String = "",
-                        pLegalGuardianPhoneNumber:Int = 0,
-                        pLegalGuardianEmail:String = "") {
-
-		id = (pId == 0) ? currentIndex++ : pId;
-        name = pName;
-		firstName = pFirstName;
-        age = pAge;
-        lastLessonDate = pLastLessonDate;
-        level = pLevel;
-        credit = pCredit;
-        address = pAddress;
-        notes = pNotes;
-        ffeLicence = pffeLicence;
-        ffeLicenceValidityYear = pffeLicenceValidityYear;
-        ffeLicenceNumber = pffeLicenceNumber;
-        legalGuardianName = pLegalGuardianName;
-        legalGuardianFirstName = pLegalGuardianFirstName;
-        legalGuardianRole = pLegalGuardianRole;
-        legalGuardianPhoneNumber = pLegalGuardianPhoneNumber;
-        legalGuardianEmail = pLegalGuardianEmail;
-
-		//startdate = (startdate == null) ? Date.now() : startdate;
-
-	}
-}
@@ -0,0 +1,88 @@
+package vo;
+import bindx.IBindable;
+
+@:bindable
+class RiderVO implements IBindable {
+
+    // constants for use with Reflect api when updating SelectedRider VO
+    public static final ID:String = "id";
+    public static final UID:String = "uid";
+	public static final NAME:String = "name";
+	public static final FIRST_NAME:String = "firstName";
+    public static final AGE:String = "age";
+    public static final LAST_LESSON_DATE:String = "lastLessonDate";
+    public static final LEVEL:String = "level";
+    public static final CREDIT:String = "credit";
+    public static final ADDRESS:String = "address";
+    public static final NOTES:String = "notes";
+    public static final FFE_LICENCE:String = "ffeLicence";
+    public static final FFE_LICENCE_VALIDITY_YEAR:String = "ffeLicenceValidityYear";
+    public static final FFE_LICENCE_NUMBER:String = "ffeLicenceNumber";
+    public static final LEGAL_GUARDIAN_NAME:String = "legalGuardianName";
+    public static final LEGAL_GUARDIAN_FIRSTNAME:String = "legalGuardianFirstName";
+    public static final LEGAL_GUARDIAN_ROLE:String = "legalGuardianRole";
+    public static final LEGAL_GUARDIAN_PHONE_NUMBER:String = "legalGuardianPhoneNumber";
+    public static final LEGAL_GUARDIAN_EMAIL:String = "legalGuardianEmail";
+
+	public var id:Int;
+    public var uid:String;
+	public var name:String;
+	public var firstName:String;
+    public var age:Int;
+    public var lastLessonDate:Int;
+    public var level:Int;
+    public var credit:Int;
+    public var address:String;
+    public var notes:String;
+    public var ffeLicence:Bool;
+    public var ffeLicenceValidityYear:Int;
+    public var ffeLicenceNumber:String;
+    public var legalGuardianName:String;
+    public var legalGuardianFirstName:String;
+    public var legalGuardianRole:String;
+    public var legalGuardianPhoneNumber:String;
+    public var legalGuardianEmail:String;
+
+
+	public function new(?pId:Int = 0, 
+                        ?pUId:String = "",
+                        ?pName:String = "", 
+                        ?pFirstName:String = "", 
+                        ?pAge:Int = 0,
+                        ?pLastLessonDate:Int,
+                        ?pLevel:Int = 0,
+                        ?pCredit:Int = 0,
+                        ?pAddress:String = "",
+                        ?pNotes:String = "",
+                        ?pffeLicence:Bool = false,
+                        ?pffeLicenceValidityYear:Int = 0,
+                        ?pffeLicenceNumber:String = "",
+                        ?pLegalGuardianName:String = "",
+                        ?pLegalGuardianFirstName:String = "",
+                        ?pLegalGuardianRole:String = "",
+                        ?pLegalGuardianPhoneNumber:String = "",
+                        ?pLegalGuardianEmail:String = "") {
+
+		id = pId;
+        uid = pUId;
+        name = pName;
+		firstName = pFirstName;
+        age = pAge;
+        lastLessonDate = pLastLessonDate;
+        level = pLevel;
+        credit = pCredit;
+        address = pAddress;
+        notes = pNotes;
+        ffeLicence = pffeLicence;
+        ffeLicenceValidityYear = pffeLicenceValidityYear;
+        ffeLicenceNumber = pffeLicenceNumber;
+        legalGuardianName = pLegalGuardianName;
+        legalGuardianFirstName = pLegalGuardianFirstName;
+        legalGuardianRole = pLegalGuardianRole;
+        legalGuardianPhoneNumber = pLegalGuardianPhoneNumber;
+        legalGuardianEmail = pLegalGuardianEmail;
+
+		//startdate = (startdate == null) ? Date.now() : startdate;
+
+	}
+}
Author	SHA1	Message	Date
nekotoro	efd69c3aa8	mxhx fiddling	2026-01-22 20:54:47 +01:00
nekotoro	8328b3d043	Partially solved mxhx font embed issue	2026-01-19 18:42:49 +01:00
nekotoro	4f047d2529	MXHX again	2026-01-15 21:03:30 +01:00
nekotoro	90fed49851	MXHX try	2026-01-13 15:30:33 +01:00
nekotoro	1ff9274eb9	Fuzzy search on Toolbar.searchTextInput	2026-01-09 10:07:47 +01:00
nekotoro	b02666a0e1	first test with https://github.com/profelis/bindx2	2026-01-05 14:09:38 +01:00
nekotoro	c97a8b4eef	Some adjustments	2026-01-02 14:54:30 +01:00
nekotoro	153b6031a3	added : ConfirmationPanel	2025-12-23 12:30:43 +01:00
nekotoro	ace49bf193	- added HProgressBar to RiderCardDrawer - added Spacer class insted of padding & gap	2025-12-21 17:26:57 +01:00
nekotoro	4ba0bae65b	- ToolBar search TextInput - Strings class	2025-12-20 20:10:56 +01:00
nekotoro	9c3e0c85c8	- GLobal styling with LPTCTheme class - SVGIconFactory	2025-12-20 15:41:16 +01:00
nekotoro	ba89991a80	RiderCardDrawer pullableEdge change to TOP	2025-12-18 18:28:09 +01:00
nekotoro	631c86d653	- added uid RiderVO prop - fixed RiderCardDrawer layout - added fake avatars - avatars are now loaded dynammically	2025-12-18 15:51:34 +01:00
nekotoro	ee6cd5f6bf	RiderCardDrawer reorganize	2025-12-17 10:31:40 +01:00
nekotoro	750d0fc74f	RiderCardDrawer fiddling	2025-12-17 09:23:42 +01:00
nekotoro	21066dd77c	- RiderCardDrawer update - updateSelectedRiderProp in AppModellocator	2025-12-16 15:13:04 +01:00
nekotoro	0676cbee41	RiderList item selection fix	2025-12-15 21:58:39 +01:00
nekotoro	ca48bf8bc9	TODO find a way to populate fields of RiderCardDrawer vie (binding ?)	2025-12-15 14:02:05 +01:00
nekotoro	da6a89c848	TODO : set temporary rider in AppModelLocator when RiderList item is clicked	2025-12-10 21:57:25 +01:00
nekotoro	d0ab28556b	TODO RiderList line 92	2025-12-08 21:47:19 +01:00
nekotoro	fbd94c52c0	some code cleaning	2025-12-06 19:59:15 +01:00
nekotoro	c6c084fcf0	removed Security.allowDomain("*"); for AIR compatibility	2025-12-06 19:41:09 +01:00
nekotoro	465d795b19	Added : RiderCardDrawer	2025-12-05 21:39:00 +01:00
nekotoro	d002ac9251	RidersListRendererAccessory UI	2025-12-05 18:45:31 +01:00
nekotoro	665cb32184	RoudedAvatar modifications	2025-12-05 08:52:49 +01:00
nekotoro	60e90c8593	Avatar, RiderListeRendererDecoration, RiderList refactoring in progress...	2025-11-30 21:50:24 +01:00
nekotoro	3143854fdb	RiderList and LoadRidersCommand optimisation	2025-11-28 16:10:13 +01:00
nekotoro	6f156d2dc5	Using a for loop instead of casting in LoadRidersCommand	2025-11-26 18:42:24 +01:00
nekotoro	aa2ba5c90d	Using RiderVO instead of Dynamic object in RidersList	2025-11-26 13:34:31 +01:00
nekotoro	6f62c3ad53	RidersList and ToolBar sizing done TODO : cast ListViewItemState.data into RiderVO	2025-11-25 13:46:20 +01:00
nekotoro	fd5eaac4c6	Added an AnchorLayout to the MainPanel and set the layout data poroperty of the StackNavigator to AnchorLayoutData.fill()	2025-11-24 22:11:07 +01:00
nekotoro	a42a468070	Trying get rid of the scroll bars - moved view classes instanciation into CREATION_COMPLETE triggered methods	2025-11-24 18:15:47 +01:00
nekotoro	e8789829ae	Added : RidesrScreen, ToolBar Riders list is now populated with JSON TODO : resize list and tolbar	2025-11-23 22:11:53 +01:00
nekotoro	858568a235	ToolBarToggleButon text size correction	2025-11-22 10:21:35 +01:00
nekotoro	ab77b0404a	Trying to set icon size & text size for ToolBarToggleButton WIP	2025-11-21 23:09:03 +01:00
nekotoro	481c07ca3f	NekoRectangle removal and replaced by RectangleSkin FeathersUI native class	2025-11-21 19:04:34 +01:00
nekotoro	aeaa8ef8ff	- Buttons changed to ToggleButtons	2025-11-21 16:08:18 +01:00
nekotoro	8b8f0b9712	Drawer related refactoring : - removed NekoDrawerEvent Button related refactoring : - removed NekoIconButton	2025-11-21 10:53:50 +01:00
nekotoro	db50bec414	NekoIconButton reshaping in progress... TODO : Is there a reason NekoIconButton heritates from Button Feathers component or not ?	2025-11-20 16:02:35 +01:00
nekotoro	d27fe111b9	drawer event chain complete	2025-11-19 22:13:11 +01:00
nekotoro	a6e2e7aa58	first try of drawer event chain currently stuck in NekoDrawerCommand TODO : extract the event from NekoDrawerCommand	2025-11-19 14:48:54 +01:00
nekotoro	28c36c699a	drawer button size	2025-11-19 13:36:53 +01:00
nekotoro	daa208a2fa	burger menu try	2025-11-18 18:47:55 +01:00
nekotoro	e6cf110bd5	futire Drawer button addition	2025-11-18 16:11:10 +01:00
nekotoro	dbbe1de2ad	header layout adjust	2025-11-17 19:06:13 +01:00
				`@@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill & no border" x="0" y="0" width="24" height="24" style="fill:none;"/><path id="certificate" d="M4,3c-1.11,0 -2,0.89 -2,2l0,10c0,1.097 0.903,2 2,2l8,0l0,5l3,-3l3,3l0,-5l2,0c1.097,0 2,-0.903 2,-2l0,-10c0,-1.097 -0.903,-2 -2,-2l-16,0m8,2l3,2l3,-2l0,3.5l3,1.5l-3,1.5l0,3.5l-3,-2l-3,2l0,-3.5l-3,-1.5l3,-1.5l0,-3.5m-8,0l5,0l0,2l-5,0l0,-2m0,4l3,0l0,2l-3,0l0,-2m0,4l5,0l0,2l-5,0l0,-2Z" style="fill-rule:nonzero;"/></svg>