Support ticket portal

Dashboard where client companies open and track support and design tickets, with Google sign-in.

Role: Frontend development
Technologies: ReactTypeScriptReduxTailwind CSSVitestPlaywright

Ticket table of the support portal with status filters

Context and problem

An internal dashboard where client companies open technical support and design tickets and follow their status until they are completed.

My role and scope

Frontend in React and TypeScript, with Redux for state, React Router for navigation and Axios to consume the API. Tests with Vitest and Playwright.

How it works

Sign-in with the company's Google account. Login uses Google Workspace SSO. A company without access can request registration from the same screen.
Ticket table with filters. Filter by number, user, description, type and status (open, in progress, completed), sorted by last update.
Guided ticket creation. The form changes by type: design (print or digital) or technical support. It accepts evidence by dragging images, PDFs or Word documents up to 10 MB.
Account settings. Dark mode, service expiry, payments, plan scope and usage reports.

Sign-in screen with the Continue with Google button — Sign-in with the corporate Google account.

Create New Ticket modal with ticket type, design type, description and an area to attach evidence — Create ticket: the form adapts to the type of request.

Settings screen with appearance, expiry, payments, plan scope and reports options — Account settings for each company.

Emails and ticket descriptions are hidden in the screenshots.

Technical decisions

State with Redux and routing with React Router.
Forms that adapt to the type of request, with drag-and-drop evidence upload and format and size validation.
Testing with Vitest for the logic and Playwright for the main flows.

Outcome

Client companies open and follow their requests in one place, with status filters and attached evidence, and sign in with the Google account they already use.