Implementare componente Ionic/Angular frontend - Junior preferred

# Implementare 6 componente frontend Ionic/Angular - Junior preferred — UI, formulare, grafice și import CSV ## Descrierea proiectului Caut un dezvoltator **frontend junior, cu cunoștințe Angular, Ionic și TypeScript**, pentru estimarea și eventuala implementare a șase componente într-o aplicație mobilă hibridă Ionic/Angular. Proiectul presupune exclusiv **frontend și logică client-side**, fără backend, baze de date, autentificare sau dezvoltarea unei aplicații de la zero. Aplicația Ionic/Angular, navigarea și infrastructura de bază sunt deja configurate și funcționale. Specificațiile, textele, resursele grafice și îndrumarea tehnică vor fi furnizate. Se urmărește o implementare simplă și economică, folosind componente Ionic standard, biblioteci open-source și, opțional, instrumente AI. ## Funcționalități solicitate ### 1. Componenta — Tutorial Tutorial introductiv cu **trei ecrane (slides)** și navigare înainte/înapoi, prin gesturi *swipe* și butoane. **Structura fiecărui ecran:** - Partea superioară: imagine sau ilustrație furnizată. - Sub imagine: text descriptiv scurt. - Indicator vizual al poziției în tutorial (1/3, 2/3, 3/3). - În footer: buton **Continue**, respectiv **Finish** pe ultimul ecran. - Acțiune **Skip**, pentru închiderea tutorialului în orice moment. **Comportament:** schimbarea slide-ului actualizează indicatorul; Continue avansează, Finish și Skip închid tutorialul. La finalizare se apelează o funcție sau se emite un eveniment simplu, fără backend. Se vor utiliza componente Ionic standard sau o soluție simplă compatibilă cu Angular/Ionic. ### 2. Componenta — FAQ Secțiune FAQ cu **trei întrebări și răspunsuri**, folosind `ion-accordion`. - Întrebarea este afișată ca titlu al elementului accordion. - Când elementul este închis, se vede doar întrebarea. - La deschidere, apare răspunsul. - Utilizatorul poate deschide și închide elementele. - Textele vor fi furnizate. Nu se solicită căutare, administrarea întrebărilor sau integrare API. ### 3. Componenta — Obiectiv Ecran pentru introducerea unui obiectiv, implementat cu **Angular Reactive Forms**. **Câmpuri:** - Titlu — input text. - Descriere — textarea. - Data finalizării — selector de dată. **Funcționalități:** - Validări de bază pentru câmpurile obligatorii și data selectată. - Mesaje de eroare pentru valori invalide. - Buton de confirmare/salvare și acțiune de revenire. - Colectarea datelor valide într-un obiect TypeScript, transmis unei funcții demonstrative sau afișat în consolă. Nu se solicită salvarea datelor într-o bază de date. ### 4. Componenta — Fields of Study (FOS) Interfață pentru căutarea și selectarea a **maximum trei categorii/domenii de studiu**. **Funcționalități:** - Câmp de căutare cu sugestii/autocomplete. - Selectarea unei categorii dintr-o listă statică. - Afișarea categoriilor selectate. - Eliminarea unei categorii selectate. - Prevenirea selecțiilor duplicate. - Limitarea la maximum trei categorii. - Adăugarea unei categorii personalizate, inclusiv printr-o fereastră modală. - Buton de confirmare a selecției. La confirmare, categoriile sunt colectate într-un array TypeScript. Lista de categorii va fi furnizată; pot fi folosite date demonstrative. Nu este necesar un API sau un sistem de persistență. ### 5. Componenta — Grafice de progres Componente frontend pentru afișarea progresului, utilizând **grafice circulare/doughnut** realizate cu Apache ECharts sau o bibliotecă echivalentă compatibilă cu Angular. **Funcționalități:** - Grafic circular care arată progresul față de un total. - Afișarea procentului și a unui titlu descriptiv. - Afișarea mai multor grafice pe baza unei liste de obiecte. - Calcularea procentelor și transformarea datelor în frontend. - Gruparea și filtrarea simplă a datelor. - Praguri de progres configurabile, de exemplu 30% și 70%. - Actualizarea graficelor când se modifică datele de intrare. Datele vor fi furnizate prin obiecte TypeScript sau servicii simulate. Nu se solicită backend, analize statistice complexe ori integrare API. ### 6. Componenta — Import CSV Interfață frontend pentru **selectarea, citirea, validarea și transformarea unui fișier CSV**, cu un serviciu TypeScript pentru procesarea datelor în client. **A. Interfața utilizatorului** - Titlu și instrucțiuni scurte privind importul. - Link/buton pentru descărcarea unui CSV exemplificativ. - Selector de fișier și afișarea numelui acestuia. - Buton **Import**, dezactivat până la selectarea fișierului. - Indicator simplu de încărcare. - Afișarea rezultatelor și erorilor. - Fereastră modală pentru continuarea cu rândurile valide. **B. Citire și validare** - Citirea fișierului CSV în frontend. - Verificarea antetului și a coloanelor obligatorii. - Verificarea structurii rândurilor și a câmpurilor obligatorii. - Validarea elementară a tipurilor de date, inclusiv câmpuri numerice. - Identificarea rândurilor valide și invalide. - Înregistrarea erorilor împreună cu rândul și câmpul afectat. Schema coloanelor și regulile exacte de validare vor fi furnizate. **C. Transformarea datelor** - Conversia rândurilor valide în obiecte TypeScript. - Definirea unor interfețe pentru cărți și adnotări. - Gruparea adnotărilor după carte. - Separarea datelor valide de erori. - Returnarea unui rezultat structurat cu obiectele valide și erorile identificate. **D. Erori și export** - Afișarea și gruparea erorilor pe categorii. - Posibilitatea descărcării unui fișier cu erorile. - Utilizarea funcțiilor standard din browser și, dacă este necesar, Capacitor Filesystem/Share pentru mediul mobil. **E. Continuarea importului** - Dacă există rânduri valide și invalide, se afișează o fereastră de confirmare. - Utilizatorul poate continua doar cu rândurile valide sau poate anula. - La confirmare, obiectele validate sunt transmise unei funcții demonstrative ori afișate în consolă. **Nu se solicită salvarea datelor, dezvoltarea unui endpoint sau integrarea cu un backend.** Este suficientă o implementare funcțională de bază. Nu se solicită suport pen