gnx/GNX-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-10-13 22:47:06 +03:00
parent 5ad9cbe3a6
commit dfcaebaf8c
12 changed files with 3233 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
gnx-react/app/support-center/page.tsx
View File

@@ -15,7 +15,11 @@ const SupportCenterPage = () => {
<Header />
<main>
<SupportCenterHero onFeatureClick={setActiveModal} />
<SupportCenterContent activeModal={activeModal} onClose={() => setActiveModal(null)} />
<SupportCenterContent
activeModal={activeModal}
onClose={() => setActiveModal(null)}
onOpenModal={setActiveModal}
/>
</main>
<Footer />
</div>

BIN
gnx-react/backend/db.sqlite3
View File

Binary file not shown.

1291
gnx-react/backend/logs/django.log
View File

File diff suppressed because it is too large Load Diff

BIN
gnx-react/backend/media/case_studies/clients/logo_dieselor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

540
gnx-react/components/pages/support/CreateTicketForm.tsx
View File

@@ -3,7 +3,11 @@ import { useState, FormEvent } from 'react';
import { createTicket, CreateTicketData } from '@/lib/api/supportService';
import { useTicketCategories } from '@/lib/hooks/useSupport';
const CreateTicketForm = () => {
interface CreateTicketFormProps {
onOpenStatusCheck?: () => void;
}
const CreateTicketForm = ({ onOpenStatusCheck }: CreateTicketFormProps) => {
const { categories, loading: categoriesLoading } = useTicketCategories();
const [formData, setFormData] = useState<CreateTicketData>({
@@ -21,6 +25,7 @@ const CreateTicketForm = () => {
const [submitError, setSubmitError] = useState<string | null>(null);
const [submitSuccess, setSubmitSuccess] = useState(false);
const [ticketNumber, setTicketNumber] = useState<string>('');
const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
const handleInputChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
@@ -30,10 +35,46 @@ const CreateTicketForm = () => {
...prev,
[name]: name === 'category' ? (value ? parseInt(value) : undefined) : value
}));
// Clear field error when user starts typing
if (fieldErrors[name]) {
setFieldErrors(prev => ({ ...prev, [name]: '' }));
}
};
const validateForm = () => {
const errors: Record<string, string> = {};
if (!formData.user_name.trim()) {
errors.user_name = 'Full name is required';
}
if (!formData.user_email.trim()) {
errors.user_email = 'Email address is required';
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.user_email)) {
errors.user_email = 'Please enter a valid email address';
}
if (!formData.title.trim()) {
errors.title = 'Subject is required';
}
if (!formData.description.trim()) {
errors.description = 'Description is required';
} else if (formData.description.trim().length < 10) {
errors.description = 'Please provide a more detailed description (minimum 10 characters)';
}
setFieldErrors(errors);
return Object.keys(errors).length === 0;
};
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
setSubmitError(null);
setSubmitSuccess(false);
@@ -54,6 +95,7 @@ const CreateTicketForm = () => {
company: '',
category: undefined
});
setFieldErrors({});
} catch (error: any) {
console.error('Ticket creation error:', error);
@@ -88,226 +130,334 @@ const CreateTicketForm = () => {
<i className="fa-solid fa-circle-check"></i>
</div>
<h3>Ticket Created Successfully!</h3>
<p className="ticket-number">Your ticket number: <strong>{ticketNumber}</strong></p>
<div className="ticket-number-container">
<div className="ticket-number-label">Your Ticket Number</div>
<div className="ticket-number-value">{ticketNumber}</div>
<button
className="btn-copy-ticket"
onClick={() => {
navigator.clipboard.writeText(ticketNumber);
const btn = document.querySelector('.btn-copy-ticket');
if (btn) {
btn.textContent = 'Copied!';
setTimeout(() => {
btn.textContent = 'Copy';
}, 2000);
}
}}
>
Copy
</button>
</div>
<p className="ticket-info">
We've received your support request and will respond as soon as possible.
Please save your ticket number for future reference.
</p>
<button
className="btn btn-primary"
onClick={() => setSubmitSuccess(false)}
>
Submit Another Ticket
</button>
<div className="success-actions">
<button
className="btn btn-primary"
onClick={() => setSubmitSuccess(false)}
>
<i className="fa-solid fa-plus me-2"></i>
Submit Another Ticket
</button>
{onOpenStatusCheck && (
<button
className="btn btn-outline"
onClick={onOpenStatusCheck}
>
<i className="fa-solid fa-search me-2"></i>
Check Ticket Status
</button>
)}
</div>
</div>
);
}
const issueTypeIcons: Record<string, string> = {
general: 'fa-info-circle',
technical: 'fa-tools',
billing: 'fa-credit-card',
feature_request: 'fa-lightbulb',
bug_report: 'fa-bug',
account: 'fa-user-circle'
};
return (
<div className="create-ticket-form">
<div className="create-ticket-form enterprise-form">
<div className="row justify-content-center">
<div className="col-12 col-lg-10 col-xl-8">
<div className="form-header">
<div className="col-12">
<div className="form-header-enterprise">
<div className="form-header-icon">
<i className="fa-solid fa-ticket"></i>
</div>
<h2>Submit a Support Ticket</h2>
<p>Fill out the form below and our team will get back to you shortly.</p>
<div style={{
background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%)',
border: '1px solid rgba(59, 130, 246, 0.3)',
borderRadius: '8px',
padding: '12px 16px',
marginTop: '1rem',
fontSize: '0.95rem',
color: '#1e293b'
}}>
<strong>ℹ️ Note:</strong> Only registered email addresses can submit tickets.
If your email is not registered, please contact support@gnxsoft.com
<p>Fill out the form below and our dedicated support team will get back to you within 24 hours.</p>
<div className="info-banner">
<i className="fa-solid fa-shield-check"></i>
<div>
<strong>Secure & Confidential</strong>
<span>All tickets are encrypted and handled with enterprise-grade security standards.</span>
</div>
</div>
</div>
{submitError && (
<div className="alert alert-danger" role="alert">
<i className="fa-solid fa-triangle-exclamation me-2"></i>
{submitError}
<div className="alert-enterprise alert-error">
<i className="fa-solid fa-triangle-exclamation"></i>
<div>
<strong>Submission Error</strong>
<p>{submitError}</p>
</div>
</div>
)}
<form onSubmit={handleSubmit} className="support-form">
<div className="row g-4">
{/* Personal Information */}
<div className="col-12">
<h4 className="form-section-title">Personal Information</h4>
<form onSubmit={handleSubmit} className="support-form-enterprise">
{/* Personal Information */}
<div className="form-section">
<div className="section-header">
<i className="fa-solid fa-user"></i>
<h3>Personal Information</h3>
</div>
<div className="row g-4">
<div className="col-md-6">
<div className="form-group-enterprise">
<label htmlFor="user_name" className="form-label-enterprise">
<span>Full Name</span>
<span className="required-badge">Required</span>
</label>
<div className="input-with-icon">
<i className="fa-solid fa-user"></i>
<input
type="text"
id="user_name"
name="user_name"
value={formData.user_name}
onChange={handleInputChange}
required
className={`form-control-enterprise ${fieldErrors.user_name ? 'error' : ''}`}
placeholder="Enter your full name"
/>
</div>
{fieldErrors.user_name && (
<span className="field-error">{fieldErrors.user_name}</span>
)}
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="user_name">
Full Name <span className="required">*</span>
</label>
<input
type="text"
id="user_name"
name="user_name"
value={formData.user_name}
onChange={handleInputChange}
required
className="form-control"
placeholder="John Doe"
/>
<div className="col-md-6">
<div className="form-group-enterprise">
<label htmlFor="user_email" className="form-label-enterprise">
<span>Email Address</span>
<span className="required-badge">Required</span>
</label>
<div className="input-with-icon">
<i className="fa-solid fa-envelope"></i>
<input
type="email"
id="user_email"
name="user_email"
value={formData.user_email}
onChange={handleInputChange}
required
className={`form-control-enterprise ${fieldErrors.user_email ? 'error' : ''}`}
placeholder="your.email@company.com"
/>
</div>
{fieldErrors.user_email && (
<span className="field-error">{fieldErrors.user_email}</span>
)}
</div>
</div>
<div className="col-md-6">
<div className="form-group-enterprise">
<label htmlFor="user_phone" className="form-label-enterprise">
<span>Phone Number</span>
<span className="optional-badge">Optional</span>
</label>
<div className="input-with-icon">
<i className="fa-solid fa-phone"></i>
<input
type="tel"
id="user_phone"
name="user_phone"
value={formData.user_phone}
onChange={handleInputChange}
className="form-control-enterprise"
placeholder="+1 (555) 123-4567"
/>
</div>
</div>
</div>
<div className="col-md-6">
<div className="form-group-enterprise">
<label htmlFor="company" className="form-label-enterprise">
<span>Company Name</span>
<span className="optional-badge">Optional</span>
</label>
<div className="input-with-icon">
<i className="fa-solid fa-building"></i>
<input
type="text"
id="company"
name="company"
value={formData.company}
onChange={handleInputChange}
className="form-control-enterprise"
placeholder="Your Company Inc."
/>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="user_email">
Email Address <span className="required">*</span>
</label>
<input
type="email"
id="user_email"
name="user_email"
value={formData.user_email}
onChange={handleInputChange}
required
className="form-control"
placeholder="john@company.com"
/>
{/* Ticket Details */}
<div className="form-section">
<div className="section-header">
<i className="fa-solid fa-clipboard-list"></i>
<h3>Ticket Details</h3>
</div>
<div className="row g-4">
<div className="col-md-6">
<div className="form-group-enterprise">
<label htmlFor="ticket_type" className="form-label-enterprise">
<span>Issue Type</span>
<span className="required-badge">Required</span>
</label>
<div className="select-with-icon">
<i className={`fa-solid ${issueTypeIcons[formData.ticket_type] || 'fa-tag'}`}></i>
<select
id="ticket_type"
name="ticket_type"
value={formData.ticket_type}
onChange={handleInputChange}
required
className="form-control-enterprise select-enterprise"
>
<option value="general">General Inquiry</option>
<option value="technical">Technical Issue</option>
<option value="billing">Billing Question</option>
<option value="feature_request">Feature Request</option>
<option value="bug_report">Bug Report</option>
<option value="account">Account Issue</option>
</select>
</div>
</div>
</div>
<div className="col-md-6">
<div className="form-group-enterprise">
<label htmlFor="category" className="form-label-enterprise">
<span>Category</span>
<span className="optional-badge">Optional</span>
</label>
<div className="select-with-icon">
<i className="fa-solid fa-folder"></i>
<select
id="category"
name="category"
value={formData.category || ''}
onChange={handleInputChange}
className="form-control-enterprise select-enterprise"
disabled={categoriesLoading}
>
<option value="">Select a category</option>
{Array.isArray(categories) && categories.map(cat => (
<option key={cat.id} value={cat.id}>
{cat.name}
</option>
))}
</select>
</div>
</div>
</div>
<div className="col-12">
<div className="form-group-enterprise">
<label htmlFor="title" className="form-label-enterprise">
<span>Subject</span>
<span className="required-badge">Required</span>
</label>
<div className="input-with-icon">
<i className="fa-solid fa-heading"></i>
<input
type="text"
id="title"
name="title"
value={formData.title}
onChange={handleInputChange}
required
className={`form-control-enterprise ${fieldErrors.title ? 'error' : ''}`}
placeholder="Brief, descriptive subject line"
/>
</div>
{fieldErrors.title && (
<span className="field-error">{fieldErrors.title}</span>
)}
</div>
</div>
<div className="col-12">
<div className="form-group-enterprise">
<label htmlFor="description" className="form-label-enterprise">
<span>Description</span>
<span className="required-badge">Required</span>
<span className="char-count">{formData.description.length} characters</span>
</label>
<div className="textarea-wrapper">
<textarea
id="description"
name="description"
value={formData.description}
onChange={handleInputChange}
required
className={`form-control-enterprise textarea-enterprise ${fieldErrors.description ? 'error' : ''}`}
rows={6}
placeholder="Please provide detailed information about your issue, including any error messages, steps to reproduce, or relevant context..."
/>
<div className="textarea-footer">
<i className="fa-solid fa-lightbulb"></i>
<span>Tip: More details help us resolve your issue faster</span>
</div>
</div>
{fieldErrors.description && (
<span className="field-error">{fieldErrors.description}</span>
)}
</div>
</div>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="user_phone">Phone Number</label>
<input
type="tel"
id="user_phone"
name="user_phone"
value={formData.user_phone}
onChange={handleInputChange}
className="form-control"
placeholder="+1 (555) 123-4567"
/>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="company">Company Name</label>
<input
type="text"
id="company"
name="company"
value={formData.company}
onChange={handleInputChange}
className="form-control"
placeholder="Your Company Inc."
/>
</div>
</div>
{/* Ticket Details */}
<div className="col-12">
<h4 className="form-section-title">Ticket Details</h4>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="ticket_type">
Issue Type <span className="required">*</span>
</label>
<select
id="ticket_type"
name="ticket_type"
value={formData.ticket_type}
onChange={handleInputChange}
required
className="form-control"
>
<option value="general">General Inquiry</option>
<option value="technical">Technical Issue</option>
<option value="billing">Billing Question</option>
<option value="feature_request">Feature Request</option>
<option value="bug_report">Bug Report</option>
<option value="account">Account Issue</option>
</select>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="category">Category</label>
<select
id="category"
name="category"
value={formData.category || ''}
onChange={handleInputChange}
className="form-control"
disabled={categoriesLoading}
>
<option value="">Select a category</option>
{Array.isArray(categories) && categories.map(cat => (
<option key={cat.id} value={cat.id}>
{cat.name}
</option>
))}
</select>
</div>
</div>
<div className="col-12">
<div className="form-group">
<label htmlFor="title">
Subject <span className="required">*</span>
</label>
<input
type="text"
id="title"
name="title"
value={formData.title}
onChange={handleInputChange}
required
className="form-control"
placeholder="Brief description of your issue"
/>
</div>
</div>
<div className="col-12">
<div className="form-group">
<label htmlFor="description">
Description <span className="required">*</span>
</label>
<textarea
id="description"
name="description"
value={formData.description}
onChange={handleInputChange}
required
className="form-control"
rows={6}
placeholder="Please provide detailed information about your issue..."
/>
</div>
</div>
<div className="col-12">
<button
type="submit"
className="btn btn-primary btn-lg"
disabled={isSubmitting}
>
{isSubmitting ? (
<>
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
Submitting...
</>
) : (
<>
<i className="fa-solid fa-paper-plane me-2"></i>
Submit Ticket
</>
)}
</button>
</div>
{/* Submit Section */}
<div className="form-submit-section">
<button
type="submit"
className="btn-submit-enterprise"
disabled={isSubmitting}
>
{isSubmitting ? (
<>
<span className="spinner-enterprise"></span>
<span>Submitting Ticket...</span>
</>
) : (
<>
<i className="fa-solid fa-paper-plane"></i>
<span>Submit Ticket</span>
<i className="fa-solid fa-arrow-right"></i>
</>
)}
</button>
<p className="submit-note">
<i className="fa-solid fa-clock"></i>
Average response time: <strong>2-4 hours</strong>
</p>
</div>
</form>
</div>

11
gnx-react/components/pages/support/SupportCenterContent.tsx
View File

@@ -9,9 +9,10 @@ type ModalType = 'create' | 'knowledge' | 'status' | null;
interface SupportCenterContentProps {
activeModal: ModalType;
onClose: () => void;
onOpenModal?: (type: ModalType) => void;
}
const SupportCenterContent = ({ activeModal, onClose }: SupportCenterContentProps) => {
const SupportCenterContent = ({ activeModal, onClose, onOpenModal }: SupportCenterContentProps) => {
// Close modal on escape key
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
@@ -115,7 +116,13 @@ const SupportCenterContent = ({ activeModal, onClose }: SupportCenterContentProp
{/* Modal Body */}
<div className="support-modal-body" style={{ padding: '40px' }}>
{activeModal === 'create' && <CreateTicketForm />}
{activeModal === 'create' && (
<CreateTicketForm onOpenStatusCheck={() => {
if (onOpenModal) {
onOpenModal('status');
}
}} />
)}
{activeModal === 'knowledge' && <KnowledgeBase />}
{activeModal === 'status' && <TicketStatusCheck />}
</div>

290
gnx-react/components/pages/support/TicketStatusCheck.tsx
View File

@@ -39,122 +39,233 @@ const TicketStatusCheck = () => {
});
};
const getRelativeTime = (dateString: string) => {
const date = new Date(dateString);
const now = new Date();
const diffMs = now.getTime() - date.getTime();
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMins / 60);
const diffDays = Math.floor(diffHours / 24);
if (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? 's' : ''} ago`;
if (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`;
if (diffDays < 7) return `${diffDays} day${diffDays !== 1 ? 's' : ''} ago`;
return formatDate(dateString);
};
const getStatusIcon = (statusName: string) => {
const status = statusName.toLowerCase();
if (status.includes('open') || status.includes('new')) return 'fa-inbox';
if (status.includes('progress') || status.includes('working')) return 'fa-spinner';
if (status.includes('pending') || status.includes('waiting')) return 'fa-clock';
if (status.includes('resolved') || status.includes('closed')) return 'fa-check-circle';
return 'fa-ticket';
};
const getPriorityIcon = (priorityName: string) => {
const priority = priorityName.toLowerCase();
if (priority.includes('urgent') || priority.includes('critical')) return 'fa-exclamation-triangle';
if (priority.includes('high')) return 'fa-arrow-up';
if (priority.includes('medium')) return 'fa-minus';
if (priority.includes('low')) return 'fa-arrow-down';
return 'fa-flag';
};
return (
<div className="ticket-status-check">
<div className="ticket-status-check enterprise-status-check">
<div className="row justify-content-center">
<div className="col-12 col-lg-8">
<div className="form-header text-center">
<div className="col-12">
<div className="status-header-enterprise">
<div className="status-header-icon">
<i className="fa-solid fa-magnifying-glass"></i>
</div>
<h2>Check Ticket Status</h2>
<p>Enter your ticket number to view the current status and details of your support request.</p>
<p>Track your support request in real-time with instant status updates</p>
</div>
<form onSubmit={handleSubmit} className="status-search-form">
<div className="search-input-group">
<input
type="text"
value={ticketNumber}
onChange={(e) => setTicketNumber(e.target.value)}
placeholder="Enter your ticket number (e.g., TKT-20231015-ABCDE)"
required
className="form-control"
/>
<form onSubmit={handleSubmit} className="status-search-form-enterprise">
<div className="search-container">
<div className="search-input-wrapper">
<i className="fa-solid fa-ticket search-icon"></i>
<input
type="text"
value={ticketNumber}
onChange={(e) => setTicketNumber(e.target.value.toUpperCase())}
placeholder="TKT-YYYYMMDD-XXXXX"
required
className="search-input-enterprise"
pattern="TKT-\d{8}-[A-Z0-9]{5}"
title="Please enter a valid ticket number (e.g., TKT-20231015-ABCDE)"
/>
{ticketNumber && (
<button
type="button"
className="clear-btn"
onClick={() => {
setTicketNumber('');
setTicket(null);
setSearchError(null);
}}
>
<i className="fa-solid fa-times"></i>
</button>
)}
</div>
<button
type="submit"
className="btn btn-primary"
className="btn-search-enterprise"
disabled={isSearching}
>
{isSearching ? (
<>
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
Searching...
<span className="spinner-enterprise"></span>
<span>Searching...</span>
</>
) : (
<>
<i className="fa-solid fa-search me-2"></i>
Check Status
<i className="fa-solid fa-search"></i>
<span>Search</span>
</>
)}
</button>
</div>
<p className="search-hint">
<i className="fa-solid fa-info-circle"></i>
Enter your ticket number exactly as it appears in your confirmation email
</p>
</form>
{searchError && (
<div className="alert alert-danger mt-4" role="alert">
<i className="fa-solid fa-triangle-exclamation me-2"></i>
{searchError}
<div className="alert-enterprise alert-error">
<i className="fa-solid fa-exclamation-circle"></i>
<div>
<strong>Ticket Not Found</strong>
<p>{searchError}</p>
</div>
</div>
)}
{ticket && (
<div className="ticket-details">
<div className="ticket-header">
<div className="ticket-number">
<i className="fa-solid fa-ticket me-2"></i>
{ticket.ticket_number}
<div className="ticket-details-enterprise">
{/* Header Section */}
<div className="ticket-header-enterprise">
<div className="ticket-number-section">
<span className="ticket-label">Ticket Number</span>
<div className="ticket-number-display">
<i className="fa-solid fa-ticket"></i>
<span>{ticket.ticket_number}</span>
<button
className="btn-copy-inline"
onClick={() => {
navigator.clipboard.writeText(ticket.ticket_number);
const btn = document.querySelector('.btn-copy-inline');
if (btn) {
const originalHTML = btn.innerHTML;
btn.innerHTML = '<i class="fa-solid fa-check"></i>';
setTimeout(() => {
btn.innerHTML = originalHTML;
}, 2000);
}
}}
>
<i className="fa-solid fa-copy"></i>
</button>
</div>
</div>
<div
className="ticket-status-badge"
style={{ backgroundColor: ticket.status_color }}
className="status-badge-enterprise"
style={{
backgroundColor: ticket.status_color || '#6366f1',
boxShadow: `0 0 20px ${ticket.status_color}33`
}}
>
{ticket.status_name}
<i className={`fa-solid ${getStatusIcon(ticket.status_name)}`}></i>
<span>{ticket.status_name}</span>
</div>
</div>
<div className="ticket-info">
<h3>{ticket.title}</h3>
<div className="ticket-meta">
<div className="meta-item">
<i className="fa-solid fa-calendar me-2"></i>
<strong>Created:</strong> {formatDate(ticket.created_at)}
{/* Info Cards Section */}
<div className="ticket-info-cards">
<div className="info-card">
<i className="fa-solid fa-calendar-plus"></i>
<div>
<span className="card-label">Created</span>
<span className="card-value">{getRelativeTime(ticket.created_at)}</span>
</div>
<div className="meta-item">
<i className="fa-solid fa-clock me-2"></i>
<strong>Last Updated:</strong> {formatDate(ticket.updated_at)}
</div>
<div className="info-card">
<i className="fa-solid fa-clock"></i>
<div>
<span className="card-label">Last Updated</span>
<span className="card-value">{getRelativeTime(ticket.updated_at)}</span>
</div>
{ticket.priority_name && (
<div className="meta-item">
<i className="fa-solid fa-flag me-2"></i>
<strong>Priority:</strong>
</div>
{ticket.priority_name && (
<div className="info-card">
<i className={`fa-solid ${getPriorityIcon(ticket.priority_name)}`}></i>
<div>
<span className="card-label">Priority</span>
<span
className="priority-badge ms-2"
style={{ backgroundColor: ticket.priority_color }}
className="card-value priority-value"
style={{ color: ticket.priority_color }}
>
{ticket.priority_name}
</span>
</div>
)}
{ticket.category_name && (
<div className="meta-item">
<i className="fa-solid fa-folder me-2"></i>
<strong>Category:</strong> {ticket.category_name}
</div>
)}
{ticket.category_name && (
<div className="info-card">
<i className="fa-solid fa-folder-open"></i>
<div>
<span className="card-label">Category</span>
<span className="card-value">{ticket.category_name}</span>
</div>
)}
</div>
</div>
)}
</div>
<div className="ticket-description">
<h4>Description</h4>
{/* Main Content */}
<div className="ticket-content-section">
<div className="content-header">
<h3>{ticket.title}</h3>
<div className="content-meta">
<span><i className="fa-solid fa-user"></i> {ticket.user_name}</span>
{ticket.company && (
<span><i className="fa-solid fa-building"></i> {ticket.company}</span>
)}
</div>
</div>
<div className="description-section">
<h4><i className="fa-solid fa-align-left"></i> Description</h4>
<p>{ticket.description}</p>
</div>
{ticket.messages && ticket.messages.length > 0 && (
<div className="ticket-messages">
<h4>Messages ({ticket.messages.length})</h4>
<div className="messages-list">
{/* Messages Section */}
{ticket.messages && ticket.messages.filter(msg => !msg.is_internal).length > 0 && (
<div className="messages-section-enterprise">
<h4>
<i className="fa-solid fa-comments"></i>
Conversation
<span className="count-badge">{ticket.messages.filter(msg => !msg.is_internal).length}</span>
</h4>
<div className="messages-list-enterprise">
{ticket.messages
.filter(msg => !msg.is_internal)
.map((message, index) => (
<div key={message.id} className="message-item">
<div className="message-header">
<div className="message-author">
<i className="fa-solid fa-user-circle me-2"></i>
{message.author_name || message.author_email}
</div>
<div className="message-date">
{formatDate(message.created_at)}
</div>
.map((message) => (
<div key={message.id} className="message-card-enterprise">
<div className="message-avatar">
<i className="fa-solid fa-user"></i>
</div>
<div className="message-content">
{message.content}
<div className="message-content-wrapper">
<div className="message-header-enterprise">
<span className="message-author">{message.author_name || message.author_email}</span>
<span className="message-time">{getRelativeTime(message.created_at)}</span>
</div>
<div className="message-text">
{message.content}
</div>
</div>
</div>
))}
@@ -162,22 +273,22 @@ const TicketStatusCheck = () => {
</div>
)}
{/* Activity Timeline */}
{ticket.activities && ticket.activities.length > 0 && (
<div className="ticket-timeline">
<h4>Activity Timeline</h4>
<div className="timeline-list">
<div className="timeline-section-enterprise">
<h4>
<i className="fa-solid fa-list-check"></i>
Activity Timeline
</h4>
<div className="timeline-items">
{ticket.activities.slice(0, 5).map((activity, index) => (
<div key={activity.id} className="timeline-item">
<div className="timeline-icon">
<div key={activity.id} className="timeline-item-enterprise">
<div className="timeline-marker">
<i className="fa-solid fa-circle"></i>
</div>
<div className="timeline-content">
<div className="timeline-description">
{activity.description}
</div>
<div className="timeline-date">
{formatDate(activity.created_at)}
</div>
<div className="timeline-content-wrapper">
<div className="timeline-text">{activity.description}</div>
<div className="timeline-time">{getRelativeTime(activity.created_at)}</div>
</div>
</div>
))}
@@ -185,6 +296,21 @@ const TicketStatusCheck = () => {
</div>
)}
</div>
{/* Footer Actions */}
<div className="ticket-footer-enterprise">
<div className="footer-info">
<i className="fa-solid fa-shield-check"></i>
<span>This ticket is securely tracked and monitored by our support team</span>
</div>
<button
className="btn-refresh"
onClick={() => handleSubmit({ preventDefault: () => {} } as FormEvent<HTMLFormElement>)}
>
<i className="fa-solid fa-rotate"></i>
Refresh Status
</button>
</div>
</div>
)}
</div>

4
gnx-react/components/shared/layout/footer/Footer.tsx
View File

@@ -60,8 +60,8 @@ const Footer = () => {
<Image
src={logoSrc}
alt="Logo"
width={160}
height={120}
width={120}
height={90}
style={{
width: 'auto',
height: 'auto'

47
gnx-react/public/styles/layout/_banner.scss
View File

@@ -800,23 +800,30 @@
.cta-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #1e40af, #0ea5e9);
color: white;
padding: 14px 28px;
border-radius: 8px;
gap: 10px;
background: linear-gradient(135deg, #1a365d, #2563eb);
color: #ffffff !important;
padding: 16px 32px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 6px 24px rgba(30, 64, 175, 0.3);
box-shadow: 0 4px 14px rgba(26, 54, 93, 0.25);
font-size: 15px;
letter-spacing: 0.3px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
span, i {
color: #ffffff !important;
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.4);
box-shadow: 0 6px 20px rgba(26, 54, 93, 0.35);
background: linear-gradient(135deg, #1e40af, #3b82f6);
}
&:active {
@@ -824,7 +831,7 @@
}
i {
font-size: 15px;
font-size: 14px;
transition: transform 0.3s ease;
}
@@ -836,25 +843,31 @@
.cta-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: white;
padding: 14px 28px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
gap: 10px;
background: rgba(255, 255, 255, 0.05);
color: #ffffff !important;
padding: 16px 32px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
font-size: 15px;
letter-spacing: 0.3px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
span, i {
color: #ffffff !important;
}
&:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1);
}
&:active {
@@ -862,7 +875,7 @@
}
i {
font-size: 15px;
font-size: 14px;
}
}
}

8
gnx-react/public/styles/layout/_footer.scss
View File

@@ -54,7 +54,7 @@
img {
filter: brightness(0) invert(1); // Make logo white for dark footer
transition: all 0.3s ease;
max-height: 120px;
max-height: 90px;
width: auto;
}
@@ -479,7 +479,7 @@
}
.footer-logo img {
max-height: 100px;
max-height: 75px;
}
.security-badges-left,
@@ -511,7 +511,7 @@
}
.footer-logo img {
max-height: 80px;
max-height: 60px;
}
.security-badges-left,
@@ -540,7 +540,7 @@
@media (max-width: 575.98px) {
.footer-logo-section {
.footer-logo img {
max-height: 60px;
max-height: 45px;
}
.security-badges-left,

297
gnx-react/public/styles/layout/_header.scss
View File

@@ -71,13 +71,16 @@
.navbar__dropdown-label {
position: relative;
padding-right: 25px;
padding: 10px 25px 10px 15px;
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&::after {
content: "\f107";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 0;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
@@ -87,6 +90,17 @@
&:hover {
color: var(--enterprise-gold);
background: rgba(255, 255, 255, 0.05);
&::after {
color: var(--enterprise-gold);
transform: translateY(-50%) rotate(180deg);
}
}
&.navbar__item-active {
color: var(--enterprise-gold);
background: rgba(212, 175, 55, 0.1);
&::after {
color: var(--enterprise-gold);
@@ -101,71 +115,103 @@
}
}
&:hover .navbar__dropdown-label::after {
transform: translateY(-50%) rotate(180deg);
&:hover .navbar__dropdown-label {
color: var(--enterprise-gold);
background: rgba(255, 255, 255, 0.05);
&::after {
transform: translateY(-50%) rotate(180deg);
color: var(--enterprise-gold);
}
}
}
.navbar__sub-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.92);
border-radius: 8px;
position: absolute !important;
top: calc(100% + 12px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: #1a1a1a !important;
border-radius: 12px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.5),
0 8px 25px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
padding: 4px 0;
min-width: 240px;
0 25px 70px rgba(0, 0, 0, 0.7),
0 10px 35px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2) !important;
padding: 12px !important;
min-width: 280px !important;
max-width: 320px;
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px) scale(0.96);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
z-index: 9999 !important;
backdrop-filter: blur(25px) saturate(180%);
// Custom scrollbar styles
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin: 8px 0;
}
&::-webkit-scrollbar-thumb {
background: rgba(212, 175, 55, 0.4);
border-radius: 10px;
&:hover {
background: rgba(212, 175, 55, 0.6);
}
}
&.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
opacity: 1 !important;
visibility: visible !important;
transform: translateX(-50%) translateY(0) scale(1) !important;
display: block !important;
}
&::before {
content: "";
position: absolute;
top: -7px;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(0, 0, 0, 0.92);
filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.4));
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #1a1a1a;
filter: drop-shadow(0 -3px 8px rgba(0, 0, 0, 0.5));
}
li {
list-style: none;
margin: 1px 6px;
border-radius: 6px;
overflow: hidden;
margin: 2px 0;
border-radius: 8px;
overflow: visible;
opacity: 1 !important;
visibility: visible !important;
a {
display: flex;
align-items: center;
padding: 10px 16px;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
font-weight: 500;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: block !important;
padding: 14px 20px !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 500 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
text-decoration: none;
border-radius: 6px;
letter-spacing: 0.2px;
line-height: 1.4;
text-decoration: none !important;
border-radius: 8px;
letter-spacing: 0.3px;
line-height: 1.5;
opacity: 1 !important;
visibility: visible !important;
&::before {
content: "";
@@ -173,30 +219,33 @@
left: 0;
top: 0;
bottom: 0;
width: 2px;
width: 3px;
background: linear-gradient(135deg, var(--enterprise-gold), #f4d03f);
transform: scaleY(0);
transition: transform 0.25s ease;
border-radius: 0 1px 1px 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 0 2px 2px 0;
}
&::after {
content: "→";
position: absolute;
right: 16px;
right: 20px;
opacity: 0;
transform: translateX(-3px);
transition: all 0.25s ease;
transform: translateX(-5px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--enterprise-gold);
font-weight: 600;
font-size: 10px;
font-weight: 700;
font-size: 14px;
}
&:hover {
color: var(--enterprise-gold);
background: rgba(212, 175, 55, 0.12);
transform: translateX(3px);
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.08));
transform: translateX(4px);
box-shadow:
0 4px 12px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
padding-right: 35px;
&::before {
transform: scaleY(1);
@@ -210,9 +259,11 @@
&.active-current-sub {
color: var(--enterprise-gold);
background: rgba(212, 175, 55, 0.18);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.12));
font-weight: 600;
box-shadow: 0 1px 6px rgba(212, 175, 55, 0.25);
box-shadow:
0 2px 10px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
&::before {
transform: scaleY(1);
@@ -222,34 +273,34 @@
// Loading and error states
.text-muted {
color: rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.65) !important;
font-style: italic;
font-size: 12px;
padding: 10px 16px;
font-size: 13px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.2px;
gap: 8px;
letter-spacing: 0.3px;
&::before {
content: "⏳";
animation: spin 1s linear infinite;
font-size: 10px;
font-size: 12px;
}
}
.text-danger {
color: #ff6b6b;
font-size: 12px;
padding: 10px 16px;
color: #ff6b6b !important;
font-size: 13px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.2px;
gap: 8px;
letter-spacing: 0.3px;
&::before {
content: "⚠️";
font-size: 10px;
font-size: 12px;
}
}
}
@@ -259,6 +310,17 @@
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeInSlideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.navbar__options {
display: flex;
@@ -349,21 +411,102 @@
}
}
}
.navbar__item--has-children {
.navbar__dropdown-label {
&:hover {
color: var(--primary-color);
background: rgba(0, 0, 0, 0.04);
&::after {
color: var(--primary-color);
}
}
&.navbar__item-active {
color: var(--primary-color);
background: rgba(212, 175, 55, 0.12);
&::after {
color: var(--primary-color);
}
}
}
&:hover .navbar__dropdown-label {
color: var(--primary-color);
background: rgba(0, 0, 0, 0.04);
&::after {
color: var(--primary-color);
}
}
}
.navbar__sub-menu {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.15),
0 10px 35px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(25px) saturate(180%);
&::before {
border-bottom-color: white;
border-bottom-color: #ffffff;
}
// Custom scrollbar for light mode
&::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
&::-webkit-scrollbar-thumb {
background: rgba(212, 175, 55, 0.5);
&:hover {
background: rgba(212, 175, 55, 0.7);
}
}
li a {
color: var(--secondary-color);
display: block !important;
color: #222222 !important;
opacity: 1 !important;
visibility: visible !important;
&:hover {
&::before {
background: linear-gradient(135deg, var(--primary-color), var(--enterprise-gold));
}
&::after {
color: var(--primary-color);
}
&:hover {
color: var(--primary-color) !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.08));
box-shadow:
0 4px 12px rgba(212, 175, 55, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
&.active-current-sub {
color: var(--primary-color) !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
box-shadow:
0 2px 10px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}
// Loading and error states for light mode
.text-muted {
color: rgba(0, 0, 0, 0.55) !important;
}
.text-danger {
color: #dc3545 !important;
}
}
@@ -936,6 +1079,20 @@
}
// Responsive styles for enterprise header
@media (max-width: 1199.98px) {
.tp-header {
.navbar__sub-menu {
min-width: 240px;
max-width: 280px;
li a {
padding: 12px 18px;
font-size: 13px;
}
}
}
}
@media (max-width: 991.98px) {
.tp-header {
.navbar__menu {

1112
gnx-react/public/styles/pages/_support-center.scss
View File

File diff suppressed because it is too large Load Diff