Spare

SPARE is a scalable, modular Angular v20 application powered by PrimeNG. It provides:

• Public: Landing pages (Home, Login, Register) for all users.
• Admin: Dashboard to manage analytics, inventory, suppliers, finances, users, and settings.
• Supplier: Portal to manage products, stock, logistics, promotions, and track performance.
• Manager: Placeholder module for future management features.

Each area is lazy-loaded and separated into its own feature module. Shared UI pieces, utilities, and core services live in global Shared and Core modules.

---

Key Features

• Lazy-Loaded Modules: Public, Admin, Supplier, Manager
• PrimeNG + PrimeFlex for a consistent, responsive UI
• Role-Based Guards (AuthGuard, RoleGuard)
• HTTP Interceptors for JWT, error handling, logging
• Shared Components: Navbar, Sidebar, Footer, Modals, Spinners
• Service-Based State with RxJS BehaviorSubject
• SCSS Theming: Light & Dark modes, variables, mixins
• Accessibility: ARIA landmarks, keyboard navigation, color contrast
• Testing & Linting scaffold (unit tests recommended)

---

Tech Stack

• Angular v20
• PrimeNG (UI components)
• PrimeFlex (layout utilities)
• PrimeIcons
• TypeScript (strict mode)
• RxJS
• SCSS (theming)
• Angular CLI

Available Scripts

In the project root, run:

• ng serve - Starts the development server at http://localhost:4200/
• ng build - Compiles the app for production to dist/
• ng test - Runs unit tests with Karma (watch mode)
• ng lint - Lints TypeScript and SCSS using configured rules
• ng e2e - Executes end-to-end tests

Routing & Layouts

• Four top-level routes:
  • /public → PublicLayoutComponent → lazy-loads PublicModule
  • /admin → AdminLayoutComponent → lazy-loads AdminModule; guarded by AuthGuard + RoleGuard
  • /supplier → SupplierLayoutComponent → lazy-loads SupplierModule; guarded by AuthGuard + RoleGuard
  • /manager → ManagerLayoutComponent → lazy-loads ManagerModule (placeholder)

Styling & Theming

• SCSS Partials in src/app/shared/styles/:
  • _variables.scss — global colors, typography, spacing
  • _mixins.scss — reusable mixins (flex-center, breakpoints)
  • themes/ — light & dark theme overrides
• Global import in src/styles.scss
• Responsive: Admin/Supplier use CSS Grid, collapse sidebar to overlay on ≤768px

Authentication & Guards

• AuthService - Login/logout, JWT storage, currentUser$
• AuthGuard - Protects routes, redirects unauthenticated users
• RoleGuard - Checks required roles, redirects if not authorized
• HTTP Interceptors - Attaches JWT, global error handling, request logging