# Customer Support Ticketing System

A modern, full-featured customer support ticketing system built with Laravel and React, featuring real-time chat capabilities, role-based access control, and a responsive user interface.

## 🚀 Features

### Authentication & Authorization

-   **Token-based Authentication** using Laravel Sanctum
-   **Role-based Access Control** (Admin & Customer roles)
-   Secure registration, login, and logout functionality

### Ticket Management

-   **Create, View, Update, Delete** tickets
-   **Comprehensive Ticket Fields**: Subject, Description, Category, Priority, Status, Attachments
-   **Role-based Visibility**: Customers see only their tickets, Admins see all tickets
-   **Ticket Status Management**: Open, In Progress, Resolved, Closed
-   **Priority Levels**: Low, Medium, High
-   **File Attachments** support (up to 5MB)

### Comments System

-   Both Admins and Customers can comment on tickets
-   **Real-time Comment Updates** via WebSocket broadcasting
-   Attachment support for comments
-   User identification and timestamps

### Real-time Chat

-   **Live Chat System** integrated with tickets
-   **WebSocket-powered** real-time messaging using Pusher
-   Customer-Admin communication linked to specific tickets
-   Message history and real-time delivery

### Modern Frontend

-   **React-based SPA** with responsive design
-   **Tailwind CSS** for modern, clean UI
-   **Real-time Updates** using Laravel Echo
-   Form validation and error handling
-   Mobile-friendly responsive design

### Backend API

-   **RESTful API** with Laravel
-   **Security Best Practices** implemented
-   **SQLite Database** (easily configurable for MySQL/PostgreSQL)
-   **File Storage** management
-   **Broadcasting** for real-time features

## 🛠️ Technology Stack

-   **Backend**: Laravel 12, PHP 8.2+
-   **Frontend**: React 18, Vite
-   **Styling**: Tailwind CSS 4
-   **Database**: SQLite (configurable)
-   **Real-time**: Pusher, Laravel Echo
-   **Authentication**: Laravel Sanctum
-   **File Storage**: Laravel Storage

## 📋 Requirements

-   PHP 8.2 or higher
-   Composer
-   Node.js 18+ and npm
-   SQLite (or MySQL/PostgreSQL)
-   Pusher account (for real-time features)

## 🚀 Installation & Setup

### 1. Clone the Repository

```bash
git clone <repository-url>
cd support-ticket
```

### 2. Install PHP Dependencies

```bash
composer install
```

### 3. Install Node.js Dependencies

```bash
npm install
```

### 4. Environment Configuration

```bash
cp .env.example .env
php artisan key:generate
```

### 5. Configure Environment Variables

Edit `.env` file with your configuration:

```env
# Database (SQLite is pre-configured)
DB_CONNECTION=sqlite

# Pusher Configuration (Required for real-time features)
BROADCAST_CONNECTION=pusher
PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=mt1

# Vite Environment Variables
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
```

### 6. Database Setup

```bash
# Create database file (SQLite)
touch database/database.sqlite

# Run migrations
php artisan migrate

# Seed admin and test users
php artisan db:seed --class=AdminSeeder
```

### 7. Storage Setup

```bash
php artisan storage:link
```

### 8. Build Frontend Assets

```bash
npm run build
# or for development
npm run dev
```

### 9. Start the Application

```bash
# Start Laravel server
php artisan serve

# In another terminal, start the queue worker (for real-time features)
php artisan queue:work

# For development, also run:
npm run dev
```

## 👥 Default User Accounts

After running the seeder, you can use these test accounts:

-   **Admin Account**

    -   Email: `admin@example.com`
    -   Password: `password`

-   **Customer Account**
    -   Email: `customer@example.com`
    -   Password: `password`

## 📖 API Documentation

### Authentication Endpoints

#### Register

```http
POST /api/register
Content-Type: application/json

{
    "name": "John Doe",
    "email": "john@example.com",
    "password": "password",
    "password_confirmation": "password"
}
```

#### Login

```http
POST /api/login
Content-Type: application/json

{
    "email": "john@example.com",
    "password": "password"
}
```

#### Logout

```http
POST /api/logout
Authorization: Bearer {token}
```

#### Get Current User

```http
GET /api/me
Authorization: Bearer {token}
```

### Ticket Endpoints

#### Get All Tickets

```http
GET /api/tickets
Authorization: Bearer {token}
```

#### Create Ticket

```http
POST /api/tickets
Authorization: Bearer {token}
Content-Type: multipart/form-data

{
    "subject": "Issue with login",
    "description": "Cannot log into my account",
    "category": "Technical",
    "priority": "high",
    "attachment": [file] (optional)
}
```

#### Get Ticket Details

```http
GET /api/tickets/{id}
Authorization: Bearer {token}
```

#### Update Ticket

```http
POST /api/tickets/{id}
Authorization: Bearer {token}

{
    "subject": "Updated subject",
    "status": "in_progress",
    "priority": "medium"
}
```

#### Delete Ticket

```http
DELETE /api/tickets/{id}
Authorization: Bearer {token}
```

### Comment Endpoints

#### Add Comment to Ticket

```http
POST /api/tickets/{id}/comments
Authorization: Bearer {token}

{
    "body": "This is a comment",
    "attachment": [file] (optional)
}
```

### Message Endpoints (Real-time Chat)

#### Send Message

```http
POST /api/tickets/{id}/messages
Authorization: Bearer {token}

{
    "body": "Hello, I need help with this issue"
}
```

## 🔄 Real-time Features

The application uses Pusher for real-time functionality:

-   **Live Chat**: Messages appear instantly in the chat interface
-   **Comment Updates**: New comments are broadcasted to all users viewing the ticket
-   **Presence Indicators**: See who's online and active

### WebSocket Channels

-   `ticket.{ticketId}`: Private channel for ticket-specific updates
-   Authorization is handled automatically based on user permissions

## 🎨 Frontend Features

### Dashboard

-   Statistics overview (total, open, in-progress, resolved tickets)
-   Recent tickets list
-   Quick actions and navigation

### Ticket Management

-   Create new tickets with file attachments
-   View and edit existing tickets
-   Filter and search functionality
-   Status and priority management

### Real-time Chat

-   Integrated chat interface within ticket details
-   Message history
-   Real-time message delivery
-   User identification (Admin/Customer badges)

### Responsive Design

-   Mobile-first approach
-   Tablet and desktop optimized
-   Touch-friendly interface
-   Accessible design patterns

## 🔒 Security Features

-   **CSRF Protection**: All forms protected against CSRF attacks
-   **Authentication**: Token-based API authentication
-   **Authorization**: Role-based access control
-   **File Upload Security**: File type and size validation
-   **SQL Injection Protection**: Eloquent ORM prevents SQL injection
-   **XSS Protection**: Input sanitization and output escaping

## 🚀 Deployment

### Production Environment Setup

1. **Server Requirements**

    - PHP 8.2+ with required extensions
    - Web server (Apache/Nginx)
    - Database server (MySQL/PostgreSQL recommended for production)
    - Node.js for building assets

2. **Environment Configuration**

    ```bash
    # Set production environment
    APP_ENV=production
    APP_DEBUG=false

    # Configure database
    DB_CONNECTION=mysql
    DB_HOST=your-db-host
    DB_DATABASE=your-db-name
    DB_USERNAME=your-db-user
    DB_PASSWORD=your-db-password

    # Configure Pusher
    PUSHER_APP_ID=your-production-app-id
    PUSHER_APP_KEY=your-production-key
    PUSHER_APP_SECRET=your-production-secret
    ```

3. **Deployment Steps**

    ```bash
    # Install dependencies
    composer install --optimize-autoloader --no-dev
    npm ci

    # Build production assets
    npm run build

    # Configure application
    php artisan config:cache
    php artisan route:cache
    php artisan view:cache

    # Run migrations
    php artisan migrate --force

    # Create storage link
    php artisan storage:link

    # Set permissions
    chmod -R 755 storage bootstrap/cache
    ```

### Recommended Hosting Platforms

-   **Laravel Forge** + DigitalOcean/AWS
-   **Heroku** (with PostgreSQL add-on)
-   **Vercel** (for frontend) + **Railway** (for backend)
-   **Shared Hosting** with PHP 8.2+ support

## 🧪 Testing

```bash
# Run PHP tests
php artisan test

# Run with coverage
php artisan test --coverage

# Run specific test suite
php artisan test --testsuite=Feature
```

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📝 License

This project is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

## 🆘 Support

If you encounter any issues or have questions:

1. Check the [Issues](../../issues) section
2. Create a new issue with detailed information
3. Include steps to reproduce the problem
4. Provide environment details (PHP version, OS, etc.)

## 🔮 Future Enhancements

-   Email notifications for ticket updates
-   Advanced reporting and analytics
-   Multi-language support
-   File preview functionality
-   Advanced search and filtering
-   Ticket templates
-   SLA management
-   Integration with external services (Slack, Discord, etc.)

---

**Built with ❤️ using Laravel and React**
