Frontend alapelvek
A frontend nem SPA, hanem többoldalas rendszer. A közös helper réteg a window.AppCore, erre épülnek az oldalankénti modulok. A cél a stabil napi használat, a DOM-kompatibilitás és a fokozatos moduláris tisztítás.
1. Többoldalas architektúra
Minden fő oldal külön HTML belépési ponttal dolgozik: Planner, CRM, Dashboard, Settings, Calendar, DJ View és readonly preview. A közös működési elemek helperként kerülnek be, nem egy nagy kliensalkalmazásban élnek.
Stabil DOM
A refaktor alapelve, hogy a meglévő HTML ID-k és fő markup szerkezet lehetőleg változatlan maradjon.
Oldalankénti felelősség
Minden oldalnak megvan a saját entrypointja és almodul készlete.
Fokozatos bontás
A nagy fájlak külön controller, render, workflow és domain modulokra válnak szét.
2. Közös core réteg
| Fájl | Feladat |
|---|---|
public/assets/JS/core/base.js | Alap DOM helper-ek, BASE útvonal, közös utility-k. |
public/assets/JS/core/api.js | Egységes API wrapper, auth retry, hibaformázás. |
public/assets/JS/core/domain-formatters.js | Közös domain-szintű formázók, például technikai szintek normalizálása. |
public/assets/JS/ui/ui-modal.js | Modalok, visszajelzések, progress felületek. |
fetch helyett lehetőleg mindig az AppCore wrapper-eket használd.3. Planner modulstruktúra
A Planner már nem egyetlen nagy app-fájl. A fő entrypoint továbbra is planner-app.js, de a felelősségek külön modulokba kerültek.
| Fájl | Szerep |
|---|---|
planner-app.js | Vékony koordinátor és context builder. |
planner-controller.js | Init és eseménykötések. |
planner-form.js | Payload összeállítás, validáció és visszatöltés. |
planner-workflow-actions.js | Mentés, reset, PDF újragenerálás, feltöltés, automatikus menetrend. |
planner-workflow-ui.js | UI-kötések, gyors műveletek, step logika. |
planner-result-email.js | Eredmény linkek, email preview és küldés. |
planner-timeline-ui.js | Menetrend dashboard, hiányok, figyelmeztetések. |
planner-template-ui.js | Eseménytípushoz kötött UI és template-alapú viselkedés. |
planner-readiness.js | Operatív állapotsáv és készültségi logika. |
planner-refresh.js | Ütemezett részleges UI frissítés. |
A Planner mellett továbbra is külön modulban él a pénzügy, aláírás, keresés, venue kezelés, template lista és accepted quote import.
4. Dashboard modulstruktúra
A dashboard oldal jelenleg öt fő modulból áll.
| Fájl | Szerep |
|---|---|
dashboard-app.js | Oldalszintű koordináció, adatlekérés és vezérlés. |
dashboard-models.js | View-model építés, például finance és health összesítések. |
dashboard-render.js | Közös renderelő segédek és HTML blokkok. |
dashboard-sections.js | Részleges szekciófrissítés és DOM-optimalizálás. |
dashboard-auth.js | Dashboard-specifikus auth UI segéd. |
5. Settings modulstruktúra
A Settings oldal admin workflow oldal, ezért itt sokféle felelősség van. A jelenlegi állapotban ez már több részre van bontva.
| Fájl | Szerep |
|---|---|
settings-app.js | Fő koordinátor és állapotkezelő. |
settings-controller.js | Init, kötés, léptetés és fő UI-események. |
settings-workflow-actions.js | Mentés, backup, restore, restart, trash és maintenance műveletek. |
settings-render.js | Megjelenítési segédek, riport- és részletblokkok renderelése. |
settings-actions.js | Kisebb UI action helper-ek. |
settings-auth.js | Settings oldali auth és admin header kezelés. |
6. CRM és egyéb oldalak
CRM
A crm-app.js kezeli az ajánlat űrlapot, follow-up frissítést, email preview-t és PDF workflow-t. Több része még egy fájlban él, de a közös domain formázókat már használja.
Calendar
Egyszerű havi nézet, kevés üzleti logikával.
DJ View
Read-only helyszíni nézet, mobilabb használatra optimalizálva.
Readonly preview
Dokumentum- és DJ-előnézet váltó oldal, eszközfüggő PDF megnyitási logikával.
7. Auth és API wrapper
A frontend auth UX szintű. A tényleges hozzáférés-ellenőrzést a backend végzi, de a kliens kezeli a 401-es válaszokra adott feloldási folyamatot.
8. Fejlesztési szabályok
| Szabály | Miért fontos? |
|---|---|
| Ne bontsd meg a fő HTML ID-ket | A jelenlegi JS modulok erre a DOM szerkezetre épülnek. |
| Új logikát lehetőleg külön modulba tegyél | Így tovább csökken a nagy entrypoint fájlak terhelése. |
| AppCore wrapper-eket használj | Az auth és a hibakezelés ettől marad egységes. |
| Ékezetes UTF-8 szövegekkel dolgozz | A projekt jelenlegi magyar nyelvi egységessége miatt. |
| Frontend refaktornál a működés elsőbbséget élvez | Ez a projekt élő napi használatban van. |