Admin Sample

A frontend-only admin console sample built with Angular 19 and PrimeNG.
It demonstrates a production-style admin UI (layout, auth flow, sidebar menus, tables, charts, dialogs) without requiring a real backend.

All API calls are handled by a Mock HTTP Interceptor with sample data, so you can explore the full app after a simple login.

---

Features

• Login / password change / OTP & SMS auth UI (mock — no real verification)
• Responsive admin layout (top bar, sidebar, theming)
• Role-based style menu structure (static mock menu)
• Data tables, search filters, date pickers, charts, dialogs, Excel upload UI
• Multi-module sample screens:
  • Monitoring
  • Statistics
  • Customer Service
  • Corporate
  • Gift Card
  • Coupon
  • Push Messages
  • Settings / Admin config

---

Tech Stack

Area	Library
Framework	Angular 19
UI	PrimeNG 19, PrimeFlex, PrimeIcons
Styling	Tailwind CSS
Charts	Chart.js
Editor	TinyMCE
Excel	SheetJS (xlsx)
i18n	ngx-translate (English)

---

Getting Started

Prerequisites

• Node.js 18+ (recommended)
• npm

Install & run

npm install
npx ng serve

Open: http://localhost:4200/

Demo login

• Enter any ID and password (e.g. admin / admin)
• Mock mode skips real OTP/SMS and takes you to the main dashboard

---

How Mock Mode Works

// src/environments/environment.ts
export const environment = {
  production: false,
  useMock: true,   // ← enables MockInterceptor
  apiUrl: '/api'
};

When useMock is true:

1. HTTP requests to /api/... are intercepted
2. Responses come from src/app/mock/ (sample JSON / in-memory data)
3. No backend server is needed

To connect a real API later, set useMock: false and configure proxy.conf.json (or your gateway) to point at your server.

---

Project Structure (high level)

src/
├── app/
│   ├── components/     # Feature modules (cs, corp, gift, dc, push, stat, config, …)
│   ├── layout/         # Shell: topbar, sidebar, footer
│   ├── mock/           # Mock interceptor + sample data + menu
│   ├── pages/auth/     # Login & auth screens
│   └── service/        # Shared API / menu / URL helpers
├── assets/             # Static assets & i18n
└── environments/       # useMock flag and API base

---

Scripts

Command	Description
npm start / npx ng serve	Dev server
npm run build	Production build → dist/admin-sample
npm run format	Prettier format
npm test	Unit tests (Karma/Jasmine)

---

Notes

• This repository is a UI / architecture sample for learning and portfolio use.
• Sample names, fees, and business labels in screens are fictional demo content, not live production data.
• Built on top of a PrimeNG admin template structure, extended with feature modules and mock APIs.

---

License

See LICENSE.md (MIT — original PrimeTek template license applies to template portions).