helpdesk-angular — Angular 后台模板

SHA-256: c570880fddeddec3e3a59582eb2ad91833e437439e0e61401a9a71fd999b692f

2026-10-15T22:23:23.934Z

# Helpdesk / Angular

[Leia em português](./README.pt-BR.md)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) ![Free](https://img.shields.io/badge/price-free-brightgreen)

A support desk front end built with Angular 19 standalone components and Tailwind CSS v4. It has both sides of a help desk: a customer-facing help center where visitors browse the knowledge base, open a ticket and track it by reference, and an agent workspace with a ticket queue, ticket detail with replies and internal notes, knowledge base management and an agent directory. Tickets, articles and the session live in Angular services backed by signals, so the app runs without a backend.

Live preview: https://template.dev.br/preview/helpdesk-angular/

## Pages included

17 routes in `src/app/pages/`, split between the public help center and the agent app:

- Help center (`/`): search box, popular articles and categories
- Knowledge base (`/kb`): article list with category filter
- Article (`/kb/:slug`): article body, helpfulness vote and related articles
- New ticket (`/abrir-chamado`): submission form with category, priority and attachments
- Track ticket (`/acompanhar`): lookup by reference showing the status timeline
- About (`/sobre`) and Contact (`/contato`): institutional pages
- Login, Register and Forgot password: authentication screens
- Dashboard (`/app`): open tickets by status, SLA at risk, volume charts and agent load
- Tickets (`/app/tickets`): queue with filters by status, priority, team and assignee
- Ticket detail (`/app/tickets/:id`): conversation, internal notes, status and priority changes, assignment and tags
- Knowledge base management (`/app/base-conhecimento`): create, edit, publish and unpublish articles
- Agents (`/app/agentes`): agent directory with team, load and resolution stats
- Settings (`/app/configuracoes`): profile, teams, SLA, notifications, theme and language
- Not found: 404 page

## Tech stack

- Angular 19 with standalone components and the new control flow syntax
- Tailwind CSS v4 built through `@tailwindcss/postcss`
- TypeScript 5.6 in strict mode
- Angular signals for the ticket, knowledge base, auth and ui services
- Angular Router with lazy routes and an `authGuard` on the agent area
- `@angular/service-worker` 19.2 for the PWA build
- Transloco 8.3 for i18n (en, es, pt-BR)
- ApexCharts 5 via ng-apexcharts on the dashboard
- TanStack Angular Table 8.21 for the ticket queue
- Reactive forms for ticket submission and settings

## Requirements

- Node.js 18 or newer
- npm (the Angular CLI comes from the local devDependencies)

## Getting started

```bash
npm install
npm start      # ng serve at http://localhost:4200
```

Authentication is simulated in an Angular service, so no backend is required. Demo credentials:

- `[email protected]` / `demo123`

Any non-empty email and password logs in; the pair above is the account suggested on the login screen and the one the seed data belongs to.

## Build for production

```bash
npm run build
```

The Angular CLI writes the production build to `dist/`. The service worker is enabled in the production configuration, so test the PWA against the built output rather than `ng serve`.

## Project structure

```
src/
└── app/
    ├── components/    layout shells, ticket and knowledge base widgets, UI primitives
    ├── core/
    │   ├── guards/    auth.guard.ts
    │   ├── services/  auth, tickets, kb and ui services
    │   └── transloco-loader.ts
    ├── pages/
    │   ├── app/       agent-side pages
    │   └── public/    help center, knowledge base and auth pages
    └── app.routes.ts  route table with lazy loading
```

## Theming and customization

Tailwind CSS v4 is configured in CSS. The stylesheet imports Tailwind, declares the dark variant and defines the design tokens inside `@theme`: the Outfit font family, extra breakpoints and the brand color ramp, with semantic surface tokens under the `--tx-` prefix. Dark mode is a class on the root element, toggled by the ui service and persisted. Ticket status and priority colors are data on the service, so adding a status is a data change rather than a template change.

## Internationalization

Three locales ship in `public/assets/i18n/`: English, Spanish and Brazilian Portuguese. Transloco loads them at runtime and the header switcher persists the choice.

## The same system in other stacks

The same help desk exists in five stacks, all sharing the screens and the visual identity. This Angular build is the free one; the React, Vue 3, Laravel and static HTML builds are paid, at https://template.dev.br

## Support this project

This template is free and MIT licensed. If it saves you time, you can support the work with a donation at https://template.dev.br/doar?template=helpdesk-angular

## License

[MIT](./LICENSE), copyright 2026 Danilo Quinelato.