diff --git a/SUPPORT_CENTER_SETUP.md b/SUPPORT_CENTER_SETUP.md new file mode 100644 index 00000000..f5444ca8 --- /dev/null +++ b/SUPPORT_CENTER_SETUP.md @@ -0,0 +1,452 @@ +# Support Center Implementation - Complete Setup Guide + +## Overview + +The Enterprise Support Center has been successfully implemented! This comprehensive system allows users to: + +1. **Submit Support Tickets** - Create and track support requests +2. **Browse Knowledge Base** - Search and read helpful articles +3. **Check Ticket Status** - Monitor ticket progress using ticket numbers +4. **No Authentication Required** - Public access to support features + +--- + +## ✅ What's Been Implemented + +### Backend (Django) + +#### 1. **Models** (`backend/support/models.py`) +- `TicketStatus` - Track ticket lifecycle (Open, In Progress, Resolved, etc.) +- `TicketPriority` - Priority levels (Low, Medium, High, Critical) with SLA hours +- `TicketCategory` - Organize tickets by category +- `SupportTicket` - Main ticket model with auto-generated ticket numbers +- `TicketMessage` - Conversation history on tickets +- `TicketActivity` - Audit trail of all changes +- `KnowledgeBaseCategory` - KB article categories +- `KnowledgeBaseArticle` - Help articles with view counts and feedback +- `SupportSettings` - Configurable support center settings + +#### 2. **API Endpoints** (`backend/support/views.py`) + +**Tickets:** +- `POST /api/support/tickets/` - Create new ticket +- `GET /api/support/tickets/` - List tickets +- `POST /api/support/tickets/check-status/` - Check status by ticket number +- `POST /api/support/tickets/{id}/add-message/` - Add message to ticket + +**Categories & Settings:** +- `GET /api/support/categories/` - List ticket categories +- `GET /api/support/statuses/` - List ticket statuses +- `GET /api/support/priorities/` - List priorities + +**Knowledge Base:** +- `GET /api/support/knowledge-base/` - List articles (with search) +- `GET /api/support/knowledge-base/{slug}/` - Get article details +- `GET /api/support/knowledge-base/featured/` - Featured articles +- `POST /api/support/knowledge-base/{slug}/mark-helpful/` - Rate article + +#### 3. **Admin Panel** (`backend/support/admin.py`) +Full Django admin integration for managing: +- Tickets with inline messages and activities +- Categories, statuses, and priorities +- Knowledge base articles and categories +- Support settings + +#### 4. **Management Command** +```bash +python manage.py populate_support_data +``` +Populates initial data: +- 5 ticket statuses +- 4 priority levels +- 6 ticket categories +- 6 KB categories +- 6 sample KB articles + +--- + +### Frontend (Next.js/React) + +#### 1. **Page Route** +- `/support-center` - Main support center page + +#### 2. **Components** (`components/pages/support/`) + +**Main Components:** +- `SupportCenterHero.tsx` - Hero section with feature highlights +- `SupportCenterContent.tsx` - Tabbed interface container +- `CreateTicketForm.tsx` - Ticket submission form +- `TicketStatusCheck.tsx` - Check ticket progress +- `KnowledgeBase.tsx` - Browse and search articles +- `KnowledgeBaseArticleModal.tsx` - Article detail modal + +#### 3. **API Services** (`lib/api/supportService.ts`) +TypeScript API client with functions for: +- Creating tickets +- Checking status +- Managing KB articles +- All CRUD operations + +#### 4. **Custom Hooks** (`lib/hooks/useSupport.ts`) +React hooks for data fetching: +- `useTicketCategories()` +- `useKnowledgeBaseCategories()` +- `useFeaturedArticles()` +- `useKnowledgeBaseArticle(slug)` +- And more... + +#### 5. **Styling** (`public/styles/pages/_support-center.scss`) +Complete, modern styling including: +- Gradient hero section +- Tabbed interface +- Responsive forms +- Article cards and modals +- Loading and error states +- Mobile-responsive design + +--- + +## 🚀 Getting Started + +### Backend Setup + +1. **Navigate to backend:** +```bash +cd backend +``` + +2. **Database is already migrated and populated!** ✅ + - Migrations applied + - Initial data loaded + +3. **Start Django server:** +```bash +../venv/bin/python manage.py runserver +``` + +4. **Access Admin Panel:** + - URL: http://localhost:8000/admin + - Create a superuser if needed: + ```bash + ../venv/bin/python manage.py createsuperuser + ``` + +### Frontend Setup + +1. **Navigate to project root:** +```bash +cd /home/gnx/Desktop/GNX-WEB/gnx-react +``` + +2. **Install dependencies (if not already):** +```bash +npm install +``` + +3. **Start development server:** +```bash +npm run dev +``` + +4. **Access Support Center:** + - URL: http://localhost:3000/support-center + +--- + +## 🎯 Key Features + +### 1. Submit Tickets +- **Form Fields:** + - Personal info (name, email, phone, company) + - Issue type (technical, billing, feature request, etc.) + - Category selection + - Subject and detailed description + +- **Auto-Generated Ticket Numbers:** + - Format: `TKT-YYYYMMDD-XXXXX` + - Example: `TKT-20251007-A3B9C` + +- **Success Confirmation:** + - Displays ticket number + - Guidance to save for tracking + +### 2. Knowledge Base +- **Search Functionality:** + - Real-time search across articles + - Search by title, content, keywords + +- **Category Browser:** + - 6 pre-populated categories + - Color-coded icons + - Article count per category + +- **Featured Articles:** + - Highlighted important articles + - View counts + - Helpful/not helpful ratings + +- **Article Modal:** + - Full article content + - Rich text support + - Feedback buttons + - Article metadata + +### 3. Ticket Status Checker +- **Check by Ticket Number:** + - Enter ticket number + - View complete ticket details + +- **Displays:** + - Current status with color coding + - Priority level + - Creation and update dates + - Full description + - Message history + - Activity timeline + +### 4. Navigation Update +- **Navbar Button Changed:** + - Old: "Get Started" → `/contact-us` + - New: "Support Center" → `/support-center` + +--- + +## 📊 Database Schema + +### Pre-Populated Data + +**Ticket Statuses:** +- Open (Blue) +- In Progress (Orange) +- Pending Response (Purple) +- Resolved (Green) +- Closed (Gray) + +**Priorities:** +- Critical (4 hours SLA) +- High (24 hours SLA) +- Medium (48 hours SLA) +- Low (72 hours SLA) + +**Ticket Categories:** +- Technical Support +- Billing & Payments +- Account Management +- Product Inquiry +- Bug Reports +- Feature Requests + +**Knowledge Base Categories:** +- Getting Started +- Account & Billing +- Technical Documentation +- Troubleshooting +- Security & Privacy +- Best Practices + +**Sample Articles:** +- How to Get Started with Our Platform +- Understanding Your Billing Cycle +- API Documentation Overview +- Common Login Issues and Solutions +- How to Update Your Payment Method +- Security Best Practices + +--- + +## 🔧 Configuration + +### API Base URL +Located in: `lib/config/api.ts` +- Default: `http://localhost:8000/api` + +### Django Settings +Support app added to `INSTALLED_APPS` in `backend/gnx/settings.py` + +### URLs +Support endpoints registered in `backend/gnx/urls.py`: +```python +path('support/', include('support.urls')), +``` + +--- + +## 🎨 UI/UX Features + +### Design Elements +- **Modern Gradient Hero** - Dark theme with gold accents +- **Tabbed Interface** - Easy navigation between features +- **Responsive Design** - Mobile-first approach +- **Loading States** - Spinners for async operations +- **Error Handling** - User-friendly error messages +- **Success Feedback** - Confirmation messages +- **Color-Coded Status** - Visual ticket status indicators + +### Animations +- GSAP scroll animations on hero +- Smooth tab transitions +- Modal fade-in/slide-up effects +- Hover effects on cards and buttons + +--- + +## 📝 Usage Examples + +### Create a Ticket (API) +```javascript +import { createTicket } from '@/lib/api/supportService'; + +const ticketData = { + title: "Login issues on mobile app", + description: "Cannot login using my credentials...", + ticket_type: "technical", + user_name: "John Doe", + user_email: "john@example.com", + user_phone: "+1234567890", + company: "Acme Corp", + category: 1 // Technical Support +}; + +const ticket = await createTicket(ticketData); +console.log(ticket.ticket_number); // TKT-20251007-A3B9C +``` + +### Check Ticket Status (API) +```javascript +import { checkTicketStatus } from '@/lib/api/supportService'; + +const ticket = await checkTicketStatus('TKT-20251007-A3B9C'); +console.log(ticket.status_name); // "Open" +``` + +### Search Knowledge Base (API) +```javascript +import { getKnowledgeBaseArticles } from '@/lib/api/supportService'; + +const articles = await getKnowledgeBaseArticles('login'); +articles.forEach(article => { + console.log(article.title); +}); +``` + +--- + +## 🔐 Security Notes + +- **Public Access:** All endpoints are public (no authentication required) +- **Ticket Numbers:** Randomly generated to prevent guessing +- **Internal Notes:** Hidden from public API responses +- **Rate Limiting:** Recommended for production deployment + +--- + +## 🚀 Future Enhancements + +Potential additions for future development: + +- [ ] **Live Chat Integration** - Real-time customer support +- [ ] **File Attachments** - Upload files with tickets +- [ ] **Email Notifications** - Automated ticket updates +- [ ] **Ticket Assignment** - Auto-routing to support agents +- [ ] **SLA Alerts** - Breach notifications +- [ ] **Analytics Dashboard** - Support metrics and reports +- [ ] **Multi-language Support** - Internationalization +- [ ] **Webhook Notifications** - Integration with external systems +- [ ] **Customer Portal** - User authentication for ticket management +- [ ] **Advanced Search** - Filters, sorting, faceted search + +--- + +## 📞 Testing the Implementation + +### Test Ticket Creation: +1. Go to http://localhost:3000/support-center +2. Click "Submit a Ticket" tab +3. Fill out the form +4. Submit and note the ticket number + +### Test Status Check: +1. Click "Check Ticket Status" tab +2. Enter the ticket number from above +3. View complete ticket details + +### Test Knowledge Base: +1. Click "Knowledge Base" tab +2. Browse categories or use search +3. Click an article to view details +4. Rate article as helpful/not helpful + +### Test Admin Panel: +1. Go to http://localhost:8000/admin +2. Navigate to Support section +3. View/edit tickets, categories, articles + +--- + +## 📄 File Structure + +``` +gnx-react/ +├── app/ +│ └── support-center/ +│ └── page.tsx # Main support page +├── components/ +│ └── pages/ +│ └── support/ +│ ├── SupportCenterHero.tsx +│ ├── SupportCenterContent.tsx +│ ├── CreateTicketForm.tsx +│ ├── TicketStatusCheck.tsx +│ ├── KnowledgeBase.tsx +│ └── KnowledgeBaseArticleModal.tsx +├── lib/ +│ ├── api/ +│ │ └── supportService.ts # API client +│ └── hooks/ +│ └── useSupport.ts # React hooks +├── public/ +│ └── styles/ +│ └── pages/ +│ └── _support-center.scss # Styles +└── backend/ + └── support/ + ├── models.py # Database models + ├── serializers.py # API serializers + ├── views.py # API views + ├── urls.py # URL routing + ├── admin.py # Admin config + ├── management/ + │ └── commands/ + │ └── populate_support_data.py + └── README.md # Module docs +``` + +--- + +## ✨ Summary + +The Enterprise Support Center is now fully operational with: + +✅ **Backend:** Complete Django REST API with 8 models and full CRUD operations +✅ **Frontend:** Modern React/Next.js interface with 6 components +✅ **Database:** Migrated and populated with sample data +✅ **Styling:** Beautiful, responsive SCSS styles +✅ **Navigation:** Updated navbar button +✅ **Documentation:** Comprehensive README and guides + +**You're ready to provide enterprise-level support to your customers!** 🎉 + +--- + +## 🆘 Need Help? + +If you encounter any issues: + +1. Check that both Django and Next.js servers are running +2. Verify the API base URL in `lib/config/api.ts` +3. Check browser console for errors +4. Review Django logs for backend issues +5. Ensure all migrations are applied + +Enjoy your new Support Center! 🚀 + diff --git a/gnx-react/app/career/[slug]/page.tsx b/gnx-react/app/career/[slug]/page.tsx index ee267e44..f4143328 100644 --- a/gnx-react/app/career/[slug]/page.tsx +++ b/gnx-react/app/career/[slug]/page.tsx @@ -1,15 +1,73 @@ +"use client"; + +import { useParams } from "next/navigation"; import Header from "@/components/shared/layout/header/Header"; import JobSingle from "@/components/pages/career/JobSingle"; import Footer from "@/components/shared/layout/footer/Footer"; import CareerScrollProgressButton from "@/components/pages/career/CareerScrollProgressButton"; import CareerInitAnimations from "@/components/pages/career/CareerInitAnimations"; +import { useJob } from "@/lib/hooks/useCareer"; + +const JobPage = () => { + const params = useParams(); + const slug = params?.slug as string; + const { job, loading, error } = useJob(slug); + + if (loading) { + return ( +
+
+
+
+
+
+
+

Loading job details...

+
+
+
+
+
+
+ ); + } + + if (error || !job) { + return ( +
+
+
+
+
+
+
+

Job Not Found

+

+ The job position you are looking for does not exist or is no longer available. +

+ + View All Positions + +
+
+
+
+
+
+ ); + } -const page = () => { return (
- +