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 pentru toate cazurile complexe ale formatului CSV, fișiere foarte mari sau dezvoltarea unui parser de la zero. Este permisă folosirea unei biblioteci CSV open-source.

## Condiții tehnice

- Angular, Ionic, TypeScript, HTML și SCSS.
- Proiect Ionic/Angular existent, configurat și funcțional.
- Componente Ionic standard, unde este posibil.
- Angular Reactive Forms pentru formulare.
- Servicii Angular simple pentru logica reutilizabilă.
- Biblioteci open-source și instrumente AI permise.
- Specificațiile, textele, imaginile și structura ecranelor vor fi furnizate.
- Nu se solicită design UI/UX original.
- Nu se solicită teste automate scrise manual, CI/CD sau publicare în magazinele de aplicații.
- Nu se solicită backend, baze de date, API-uri sau arhitectură complexă.

## Ce trebuie să conțină oferta

Vă rog să transmiteți:

1. **Prețul fix total**, în RON sau EUR.
2. **Prețul separat pentru fiecare dintre cele șase componente.**
3. **Numărul estimat de ore pentru fiecare componentă.**
4. Durata calendaristică estimată.
5. Presupunerile, limitările și eventualele excluderi.
6. Experiența cu Angular/Ionic și nivelul de senioritate.

Vă rog să folosiți următoarea structură:

| Componentă | Ore estimate | Preț fix |
|---|---:|---:|
| Tutorial | | |
| FAQ | | |
| Obiectiv | | |
| Fields of Study | | |
| Grafice de progres | | |
| Import CSV | | |
| **Total** | | |

Caut o soluție simplă, economică, potrivită unui **dezvoltator frontend junior**, care primește specificații clare și poate utiliza asistență AI.

Vă rog să nu includeți în ofertă dezvoltare backend, arhitectură complexă, design UI/UX de la zero sau funcționalități suplimentare.