SupportFlow AI is a static React + Vite + TypeScript portfolio project that looks and behaves like a real IT/service desk triage tool. It analyses support tickets in the browser, predicts routing signals, finds similar historical issues, drafts first responses, and summarises management dashboard insights.

All included data is fictional sample data. The app uses no backend, database, paid APIs, external AI APIs, or secret keys.

Add screenshots here after publishing or running locally:

• Dashboard overview
• Ticket table with filters
• Ticket detail analysis drawer
• Similar issues comparison
• Reports export page

• Load 40+ realistic fake IT support tickets.
• Upload a CSV of ticket data with validation and error handling.
• Search and filter tickets by status, priority, category, system, and keyword.
• Select a ticket to view AI-style analysis:
  • predicted category
  • predicted priority
  • affected system
  • SLA risk
  • likely support team
  • similar tickets
  • suggested first response
  • troubleshooting steps
• Dashboard cards and charts for:
  • total ticket volume
  • open and unresolved tickets
  • high-priority tickets
  • SLA risk
  • priority split
  • common categories and systems
• Similar issue matching using local token scoring.
• Export an analysed CSV report.
• Responsive dark professional UI for laptop and mobile.

SupportFlow AI does not call any AI API. The analysis engine in src/lib/analyzer.ts uses transparent local rules:

• Keyword scoring for category and affected system.
• Priority scoring based on impact words such as urgent, down, blocked, payroll, invoice, production, all users, and single user.
• SLA risk scoring based on predicted priority, ticket age, status, and interaction count.
• Similar ticket search using token matching with TF-IDF-style cosine similarity.
• Suggested first replies and troubleshooting steps from local playbooks.

Required columns:

id,createdDate,requester,subject,description

Optional columns:

status,category,priority,system,assignedTeam,interactions,resolution,tags

Notes:

• createdDate must be a valid date string.
• status accepts Open, In Progress, Waiting on User, Resolved, or Closed.
• priority accepts Low, Medium, High, or Critical.
• Use semicolons or pipes for multiple tags, for example invoice;approval;finance.

npm install
npm run dev

Build for production:

npm run build

Preview the production build:

npm run preview

This project is configured for GitHub Pages with Vite. The default production base path is:

/SupportFLAI/

If your repository name is different, update vite.config.ts or set VITE_BASE_PATH before building.

The included workflow at .github/workflows/deploy.yml builds the app and deploys dist to GitHub Pages on pushes to main.

Deployment steps:

1. Push the project to a GitHub repository.
2. In GitHub, open Settings > Pages.
3. Set the source to GitHub Actions.
4. Push to main or run the workflow manually.
5. Open the Pages URL shown by the workflow.

This project is designed to demonstrate front-end product thinking, TypeScript structure, client-side data processing, CSV handling, accessible UI design, and a safe way to simulate AI-style support operations without private data.