Feat: Enhance Support Ticket System with Replies, Filtering, and Improved UI

[codeunia-dev]

This pull request introduces major improvements to the Support Ticket System, enhancing both functionality and user experience for admins and users.

✨ Key Features Added

• Support Ticket Replies System

  • Enables two-way communication between users and admins.
  • Includes proper author validation (user/admin).
  • Adds policies for secure and role-based reply access.

• Enhanced Ticket Detail Page

  • Redesigned layout with a more responsive, user-friendly interface.
  • Displays full ticket history with replies and timestamps.

• Advanced Ticket Filtering & Status Management

  • Added filtering options by status, type, and date.
  • Improved indexing and query performance for faster loading.

🧠 Backend Enhancements

• Added support_ticket_replies table with proper foreign keys and RLS.
• Updated security policies for both tickets and replies.
• Improved database indexing for optimized query performance.

🧩 UI/UX Improvements

• Polished admin and user interfaces for ticket handling.
• Improved layout consistency across support pages.
• Responsive design for better mobile and desktop experience.

✅ Additional Notes

• All new features are backward-compatible.
• Ensures secure data handling via RLS and policy refinements.
• Closes previous issues related to limited communication flow in support module.

---

Authored by: @akshay0611 '

Summary by CodeRabbit

• New Features
  • Users can now reply directly to support tickets
  • Support ticket replies now display both admin and user responses with distinct visual styling and author information
  • Added status filtering for ticket history (Open, In Progress, Resolved, Closed)
  • Enhanced ticket detail page with improved layout, including ticket information and action options
  • Improved notification system for admin replies with formatted email content

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Nov 8, 2025 5:24am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The pull request extends the support ticket system to enable both admin and user replies. Changes include updating data models to make admin_id optional and adding user_id and user profile fields; modifying API routes to fetch and enrich replies with both admin and user author data; introducing a new POST endpoint for users to submit replies with optional email notifications; adding an admin reply email builder; and significantly enhancing UI in both admin and user ticket detail pages to display and differentiate between reply types.

Changes

Cohort / File(s)	Summary
Data Models & Type Definitions app/admin/support/[id]/page.tsx, app/protected/help/ticket/[id]/page.tsx	TicketReply interface modified: admin_id changed from required to optional; added user_id and nested user object with profile fields (id, email, name, avatar).
Data Models & Type Definitions components/TicketHistory.tsx	Introduced TicketStatus type enum; updated SupportTicket interface to use new type for status field.
API Reply Enrichment app/api/admin/support/tickets/[id]/route.ts, app/api/support/tickets/[id]/route.ts	Enhanced GET routes to fetch and map both admin and user profiles for ticket replies using combined ID sets; replies now include both admin and user author data.
API Reply Creation app/api/support/tickets/[id]/reply/route.ts	New POST route handler for ticket replies with dual logic: admin path sends email notification to ticket owner; user path notifies support team and validates requester is ticket owner. Includes auth checks, profile loading, and error handling.
Email Support lib/email/support-emails.ts	Added new getAdminReplyEmail() function to compose HTML email for admin replies with ticket details and reply message.
Admin Ticket Detail UI app/admin/support/[id]/page.tsx	Enhanced reply rendering with runtime differentiation between admin and user replies; dynamic avatar initials, author name display, distinct visual styling per reply type (border color, background gradient), and per-reply badges.
User Ticket Detail & History UI app/protected/help/ticket/[id]/page.tsx, components/TicketHistory.tsx	Major UI remodel: new responsive grid layout for ticket details; added client-side reply form with Textarea input and Send button; enhanced reply history with avatar/initials and contextual author labeling; added new ticket details and actions sections; TicketHistory.tsx adds status filtering with dynamic counts and empty state handling.

Sequence Diagram

sequenceDiagram
    participant User
    participant UserUI as User Page
    participant API as /api/support/tickets/[id]/reply
    participant DB as Database
    participant Email as Email Service
    participant Admin as Admin

    rect rgb(200, 220, 240)
    Note over User,Admin: User Reply Workflow
    User->>UserUI: Enter reply message
    UserUI->>API: POST reply
    API->>DB: Verify user is ticket owner
    DB-->>API: Ticket verified
    API->>DB: Create user reply record
    DB-->>API: Reply created
    API->>Email: Send notification to support
    Email->>Admin: Support reply notification
    API-->>UserUI: Success response
    UserUI->>UserUI: Clear input, refetch ticket
    UserUI-->>User: Display new reply
    end

    rect rgb(240, 220, 200)
    Note over User,Admin: Admin Reply Workflow
    Admin->>API: Submit admin reply via separate route
    API->>DB: Create admin reply record
    DB-->>API: Reply created
    API->>Email: Compose admin reply email
    Email->>User: Send ticket reply email
    API-->>Admin: Success response
    Admin->>Admin: View updated ticket with replies
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Authentication & authorization logic in app/api/support/tickets/[id]/reply/route.ts: Verify dual code paths (admin vs. user) correctly enforce access control and ticket ownership validation
• Data enrichment mapping in app/api/admin/support/tickets/[id]/route.ts and app/api/support/tickets/[id]/route.ts: Ensure admin and user profile IDs are correctly collected, deduplicated, and mapped to replies without cross-contamination
• Reply rendering logic in app/admin/support/[id]/page.tsx and app/protected/help/ticket/[id]/page.tsx: Verify conditional styling and author display correctly differentiate between admin and user reply types
• Email sending error handling: Check that email failures in the reply route don't prevent reply creation or leave orphaned records

Possibly related PRs

• feat(adminsupport): Implement admin support ticket management dashboard #286: Modifies the same admin support ticket detail page and admin ticket APIs to enhance admin reply workflows
• feat(support): Enhance support ticket email notifications and workflows #287: Adds support email utility enhancements that align with the new admin reply email builder introduced here
• feat(support): Add admin reply functionality to support ticket detail page #288: Focuses on admin support reply flow including admin reply route and UI, directly overlapping with this PR's reply infrastructure

Poem

🐰 A hop and a bounce through tickets so fine,
Users reply now—the feature's divine!
Admin and user, both voices heard clear,
With avatars gleaming and profiles sincere,
Support tickets flourish from burrow to sphere! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/adminsupport

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fc8479d and c7440ba.

📒 Files selected for processing (7)

• app/admin/support/[id]/page.tsx (3 hunks)
• app/api/admin/support/tickets/[id]/route.ts (1 hunks)
• app/api/support/tickets/[id]/reply/route.ts (1 hunks)
• app/api/support/tickets/[id]/route.ts (1 hunks)
• app/protected/help/ticket/[id]/page.tsx (5 hunks)
• components/TicketHistory.tsx (3 hunks)
• lib/email/support-emails.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}