IT Ticketing System(ITS)

A role-based IT Ticketing Web Application inspired by Freshservice, designed to manage internal service requests efficiently across departments.

The system supports Employees, Support Staff, and Admins, each with clearly defined responsibilities and access levels.

---

🚀 Features

🔐 Authentication & Authorization

• Firebase Authentication (Email & Password)
• Persistent login sessions
• Role-based access control (RBAC)

🎭 Role-Based System

• Employee

  • Raise new tickets
  • View and track own tickets

• Support Staff

  • Department-level dashboard
  • View and manage assigned tickets
  • Update ticket status, priority, and activity

• Admin

  • Global dashboard
  • User management (Add / Edit / Delete users)
  • View all tickets across departments

🎟️ Ticket Management

• Create, view, and update tickets
• Priority, urgency, impact handling
• Department-based ticket routing
• Activity logs and attachments
• Full-page ticket details view (/tickets/:ticketId)

📊 Dashboards

• Ticket statistics
• Status-based and priority-based insights
• Department-level visibility

🧭 Navigation

• Role-based dynamic sidebar
• Protected routes
• Clean URL structure

---

🛠 Tech Stack

Frontend

• React (Vite)
• Redux Toolkit
• React Router v6
• Tailwind CSS
• shadcn/ui
• React Hook Form

Backend / Services

• Firebase Authentication
• Firebase Firestore
• Supabase Storage (for file uploads)

---

📁 Project Structure (Simplified)

src/
│
├── app/                # Redux store
├── components/         # Reusable UI components
├── data/               # app data and mock data
├── context/            # AuthProvider
├── features/           # Redux slices
├── firebase/           # Firebase config
├── hooks/              # Custom hooks (useAuthUser, useUser, useTicket)
├── pages/              # Route-level pages
├── router/             # AppRouter & ProtectedRoute
├── services/           # Firebase service functions
├── utils/              # Helpers & utilities
└── main.jsx

---

🧩 Routing Overview

Route	Description
/login	Authentication
/dashboard	Role-based dashboard
/tickets	Tickets list
/tickets/:ticketId	Full ticket details page
/users	User management (Admin only)

---

🔒 Role-Based Access

Role	Access
Employee	My Tickets, Raise Ticket
Support	Dashboard, Department Tickets, My Tickets
Admin	Dashboard, All Tickets, User Management

---

⚙️ Setup & Installation

1. Clone the repository

git clone <repo-url>
cd it-ticketing-system

2. Install dependencies

npm install

3. Environment Variables

Create a .env file and add Firebase credentials:

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...

4. Run the application

npm run dev

---

📌 Design Decisions

• Ticket Details are implemented as a full-page route, not a nested view
• Sidebar navigation is role-based, not permission-based per component
• Services are decoupled from Redux for scalability
• Hooks act as the bridge between services and state
• Firestore is the source of truth for ticket and user data

---

🔮 Future Enhancements

• SLA tracking
• Ticket escalation rules
• Search & advanced filters
• Notifications
• Audit logs
• Analytics & reports

---

👤 Author

Abdullah Surve Frontend / MERN Stack Developer Role-based systems • Scalable UI • Clean architecture