SupportFlow

A modern, AI-powered support ticketing system built with Next.js, designed to streamline customer support for companies with role-based access for admins, clients, and helpers.

Features

• Secure Authentication: Role-based authentication using NextAuth.js with JWT tokens for admins, clients, and helpers.
• Admin Management: Dashboard for managing companies and users with CRUD operations.
• Company Portals: Dynamic company-specific pages for registration, login, and dashboards.
• Ticket Management: Clients can view and manage their tickets; helpers can access assigned tickets and chat history.
• AI-Powered Chat: Integrated AI chat tool using Google AI Genkit for enhanced support interactions, including ticket summarization, company descriptions, and question answering.
• Responsive UI: Built with Tailwind CSS and Radix UI components for a clean, professional interface.
• Real-time Data: Firebase integration for data management and real-time updates.

Tech Stack

• Frontend: Next.js 15 (App Router), React 18, TypeScript
• Styling: Tailwind CSS, PostCSS
• UI Components: Radix UI
• Authentication: NextAuth.js
• Database: Firebase
• AI: Google AI Genkit
• Query Management: TanStack Query
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18 or later
• npm or yarn
• Firebase project setup
• Google AI API key (for Genkit)

Installation

1. Clone the repository:

   git clone https://github.com/2SuryaPrakash/studio.git
   cd studio

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env.local file in the root directory and add the following:

   NEXTAUTH_SECRET=your-nextauth-secret
   NEXTAUTH_URL=http://localhost:9002
   GOOGLE_GENAI_API_KEY=your-google-ai-api-key
   FIREBASE_API_KEY=your-firebase-api-key
   FIREBASE_AUTH_DOMAIN=your-firebase-auth-domain
   FIREBASE_PROJECT_ID=your-firebase-project-id
   FIREBASE_STORAGE_BUCKET=your-firebase-storage-bucket
   FIREBASE_MESSAGING_SENDER_ID=your-firebase-messaging-sender-id
   FIREBASE_APP_ID=your-firebase-app-id
   

4. Configure Firebase:

   • Set up your Firebase project and enable Firestore.
   • Update the Firebase config in your environment variables.

Running the Application

1. Start the development server:

   npm run dev

   The app will be available at http://localhost:9002.

2. For AI development (optional):

   npm run genkit:dev

3. Build for production:

   npm run build
   npm start

Scripts

• npm run dev: Start the development server with Turbopack.
• npm run genkit:dev: Start Genkit AI development server.
• npm run genkit:watch: Start Genkit with watch mode.
• npm run build: Build the application for production.
• npm run start: Start the production server.
• npm run lint: Run ESLint.
• npm run typecheck: Run TypeScript type checking.

Usage

• Admin: Access /admin/[username]/dashboard to manage companies and users.
• Client: Register/login at /company/[companyId]/register or /company/[companyId]/login, then access dashboard at /company/[companyId]/[userId]/dashboard.
• Helper: Similar to clients, with access to assigned tickets and chat history.

The AI chat tool is integrated into the dashboards for real-time support.

Project Structure

src/
├── app/                 # Next.js App Router pages
│   ├── (auth)/          # Authentication pages
│   ├── (company)/       # Company-specific pages
│   ├── admin/           # Admin pages
│   ├── api/             # API routes
│   └── components/      # Reusable UI components
├── ai/                  # AI flows and configurations
├── hooks/               # Custom React hooks
├── lib/                 # Utilities and configurations
└── types/               # TypeScript type definitions