Skip to content

Commit c67464c

Browse files
codeunia-devcodeunia-dev
authored
Merge pull request #284 from codeunia-dev/ui/messaging
feat(help): Add comprehensive help page with FAQ and quick actions
2 parents f240930 + 4dd5d8f commit c67464c

File tree

4 files changed

+513
-0
lines changed

4 files changed

+513
-0
lines changed

‎app/protected/help/page.tsx‎

Lines changed: 356 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,356 @@
1+
'use client'
2+
3+
import React, { useState } from 'react'
4+
import { Input } from '@/components/ui/input'
5+
import { Button } from '@/components/ui/button'
6+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
7+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
8+
import {
9+
Search,
10+
HelpCircle,
11+
Mail,
12+
MessageSquare,
13+
BookOpen,
14+
Settings,
15+
Shield,
16+
Users,
17+
Trophy,
18+
Calendar,
19+
Code,
20+
AlertCircle,
21+
CheckCircle,
22+
Clock,
23+
ExternalLink
24+
} from 'lucide-react'
25+
26+
const quickActions = [
27+
{ icon: Shield, title: 'Reset Password', description: 'Change your account password', href: '/protected/settings' },
28+
{ icon: Users, title: 'Update Profile', description: 'Edit your profile information', href: '/protected/profile/view' },
29+
{ icon: Mail, title: 'Contact Support', description: 'Get help from our team', action: 'contact' },
30+
{ icon: AlertCircle, title: 'Report a Bug', description: 'Help us improve the platform', action: 'bug' },
31+
]
32+
33+
const faqCategories = [
34+
{
35+
title: 'Getting Started',
36+
icon: BookOpen,
37+
faqs: [
38+
{
39+
question: 'How do I complete my profile?',
40+
answer: 'Go to your profile page by clicking on your avatar in the sidebar, then click "Edit Profile". Fill in all required fields including your bio, skills, and education details.'
41+
},
42+
{
43+
question: 'How do I navigate the platform?',
44+
answer: 'Use the sidebar on the left to access different sections. On mobile, tap the menu icon in the top-left corner. The dashboard gives you an overview of all your activities.'
45+
},
46+
{
47+
question: 'What are the main features available?',
48+
answer: 'Codeunia offers courses, assignments, tests, hackathons, events, messaging, connections, study groups, mentorship, and career opportunities all in one platform.'
49+
}
50+
]
51+
},
52+
{
53+
title: 'Courses & Learning',
54+
icon: BookOpen,
55+
faqs: [
56+
{
57+
question: 'How do I enroll in a course?',
58+
answer: 'Navigate to "My Courses" from the sidebar, browse available courses, and click "Enroll" on any course you\'re interested in. Some courses may have prerequisites.'
59+
},
60+
{
61+
question: 'Where can I find my assignments?',
62+
answer: 'All your assignments are listed in the "Assignments" section. You can filter by course, due date, or status (pending, submitted, graded).'
63+
},
64+
{
65+
question: 'How do I submit an assignment?',
66+
answer: 'Open the assignment, complete the required work, and click "Submit". You can attach files, add links, or write text responses depending on the assignment type.'
67+
}
68+
]
69+
},
70+
{
71+
title: 'Tests & Assessments',
72+
icon: Trophy,
73+
faqs: [
74+
{
75+
question: 'How do I take a test?',
76+
answer: 'Go to "Test Dashboard" or "Browse Tests", select a test, and click "Start Test". Make sure you have a stable internet connection and enough time to complete it.'
77+
},
78+
{
79+
question: 'Can I retake a test?',
80+
answer: 'It depends on the test settings. Some tests allow multiple attempts while others are one-time only. Check the test details before starting.'
81+
},
82+
{
83+
question: 'Where can I see my test results?',
84+
answer: 'Your test results are available in "Grades & Progress" section. You can view detailed feedback, correct answers, and your performance analytics.'
85+
}
86+
]
87+
},
88+
{
89+
title: 'Messages & Connections',
90+
icon: MessageSquare,
91+
faqs: [
92+
{
93+
question: 'How do I send a message?',
94+
answer: 'Go to the Messages section, click "New Message", search for the person you want to message, and start chatting. You can also message from their profile.'
95+
},
96+
{
97+
question: 'How do I add connections?',
98+
answer: 'Visit the Connections page, use the search tab to find users, and click "Follow" on their profile. They can follow you back to create a mutual connection.'
99+
},
100+
{
101+
question: 'Can I create group chats?',
102+
answer: 'Yes! In the Messages section, click "New Message" and select multiple recipients to create a group conversation.'
103+
}
104+
]
105+
},
106+
{
107+
title: 'Events & Activities',
108+
icon: Calendar,
109+
faqs: [
110+
{
111+
question: 'How do I join a hackathon?',
112+
answer: 'Browse available hackathons in the "Hackathons" section, read the details, and click "Register". You can participate individually or as a team.'
113+
},
114+
{
115+
question: 'How do I register for events?',
116+
answer: 'Go to "Events & Workshops", find an event you\'re interested in, and click "Register". You\'ll receive confirmation and reminders via email.'
117+
},
118+
{
119+
question: 'Can I create my own project?',
120+
answer: 'Yes! Visit the "Projects" section and click "Create Project". Add details, invite collaborators, and showcase your work to the community.'
121+
}
122+
]
123+
},
124+
{
125+
title: 'Technical Issues',
126+
icon: Code,
127+
faqs: [
128+
{
129+
question: 'I can\'t log in to my account',
130+
answer: 'Try resetting your password using the "Forgot Password" link. If that doesn\'t work, clear your browser cache or try a different browser. Contact support if the issue persists.'
131+
},
132+
{
133+
question: 'The page is loading slowly',
134+
answer: 'Check your internet connection. Try refreshing the page or clearing your browser cache. If the issue continues, it might be temporary server maintenance.'
135+
},
136+
{
137+
question: 'I\'m not receiving email notifications',
138+
answer: 'Check your spam folder. Verify your email address in Settings. Make sure notifications are enabled in your account preferences.'
139+
}
140+
]
141+
},
142+
{
143+
title: 'Account & Settings',
144+
icon: Settings,
145+
faqs: [
146+
{
147+
question: 'How do I change my password?',
148+
answer: 'Go to Settings, click on "Security", and select "Change Password". Enter your current password and your new password twice to confirm.'
149+
},
150+
{
151+
question: 'How do I manage notifications?',
152+
answer: 'Visit Settings > Notifications to customize which notifications you receive via email, push, or in-app alerts.'
153+
},
154+
{
155+
question: 'Can I delete my account?',
156+
answer: 'Yes, but this action is permanent. Go to Settings > Account > Delete Account. You\'ll need to confirm this action and all your data will be removed.'
157+
}
158+
]
159+
}
160+
]
161+
162+
export default function HelpPage() {
163+
const [searchQuery, setSearchQuery] = useState('')
164+
const [filteredFaqs, setFilteredFaqs] = useState(faqCategories)
165+
166+
const handleSearch = (query: string) => {
167+
setSearchQuery(query)
168+
169+
if (!query.trim()) {
170+
setFilteredFaqs(faqCategories)
171+
return
172+
}
173+
174+
const filtered = faqCategories.map(category => ({
175+
...category,
176+
faqs: category.faqs.filter(faq =>
177+
faq.question.toLowerCase().includes(query.toLowerCase()) ||
178+
faq.answer.toLowerCase().includes(query.toLowerCase())
179+
)
180+
})).filter(category => category.faqs.length > 0)
181+
182+
setFilteredFaqs(filtered)
183+
}
184+
185+
return (
186+
<div className="flex flex-col h-full bg-black overflow-hidden">
187+
{/* Header */}
188+
<div className="border-b border-zinc-800 bg-black p-4 flex-shrink-0">
189+
<div className="max-w-5xl mx-auto">
190+
<div className="flex items-center gap-3 mb-4">
191+
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600">
192+
<HelpCircle className="h-5 w-5 text-white" />
193+
</div>
194+
<h1 className="text-xl md:text-2xl font-bold text-white">Help Center</h1>
195+
</div>
196+
<p className="text-zinc-400 text-sm md:text-base">
197+
Find answers to common questions or get in touch with our support team
198+
</p>
199+
</div>
200+
</div>
201+
202+
{/* Main Content */}
203+
<div className="flex-1 overflow-y-auto bg-black">
204+
<div className="max-w-5xl mx-auto p-4 space-y-8">
205+
{/* Search Bar */}
206+
<div className="relative">
207+
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-zinc-500" />
208+
<Input
209+
placeholder="Search for help..."
210+
value={searchQuery}
211+
onChange={(e) => handleSearch(e.target.value)}
212+
className="pl-10 h-12 bg-zinc-900 border-zinc-800 text-white placeholder:text-zinc-500 focus:border-blue-500 focus:ring-blue-500"
213+
/>
214+
</div>
215+
216+
{/* Quick Actions */}
217+
{!searchQuery && (
218+
<div>
219+
<h2 className="text-lg font-semibold text-white mb-4">Quick Actions</h2>
220+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
221+
{quickActions.map((action, index) => (
222+
<Card key={index} className="bg-zinc-900 border-zinc-800 hover:border-zinc-700 transition-colors cursor-pointer">
223+
<CardHeader className="pb-3">
224+
<div className="flex items-start gap-3">
225+
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-600/20">
226+
<action.icon className="h-5 w-5 text-blue-400" />
227+
</div>
228+
<div>
229+
<CardTitle className="text-white text-base">{action.title}</CardTitle>
230+
<CardDescription className="text-zinc-400 text-sm">
231+
{action.description}
232+
</CardDescription>
233+
</div>
234+
</div>
235+
</CardHeader>
236+
</Card>
237+
))}
238+
</div>
239+
</div>
240+
)}
241+
242+
{/* FAQ Categories */}
243+
<div>
244+
<h2 className="text-lg font-semibold text-white mb-4">
245+
{searchQuery ? 'Search Results' : 'Frequently Asked Questions'}
246+
</h2>
247+
248+
{filteredFaqs.length === 0 ? (
249+
<Card className="bg-zinc-900 border-zinc-800">
250+
<CardContent className="flex flex-col items-center justify-center py-12">
251+
<AlertCircle className="h-12 w-12 text-zinc-600 mb-4" />
252+
<p className="text-white font-medium mb-2">No results found</p>
253+
<p className="text-zinc-400 text-sm">Try different keywords or contact support</p>
254+
</CardContent>
255+
</Card>
256+
) : (
257+
<div className="space-y-6">
258+
{filteredFaqs.map((category, categoryIndex) => (
259+
<Card key={categoryIndex} className="bg-zinc-900 border-zinc-800">
260+
<CardHeader>
261+
<div className="flex items-center gap-3">
262+
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-600/20">
263+
<category.icon className="h-5 w-5 text-blue-400" />
264+
</div>
265+
<CardTitle className="text-white">{category.title}</CardTitle>
266+
</div>
267+
</CardHeader>
268+
<CardContent>
269+
<Accordion type="single" collapsible className="w-full">
270+
{category.faqs.map((faq, faqIndex) => (
271+
<AccordionItem
272+
key={faqIndex}
273+
value={`item-${categoryIndex}-${faqIndex}`}
274+
className="border-zinc-800"
275+
>
276+
<AccordionTrigger className="text-left text-white hover:text-blue-400 hover:no-underline">
277+
{faq.question}
278+
</AccordionTrigger>
279+
<AccordionContent className="text-zinc-400">
280+
{faq.answer}
281+
</AccordionContent>
282+
</AccordionItem>
283+
))}
284+
</Accordion>
285+
</CardContent>
286+
</Card>
287+
))}
288+
</div>
289+
)}
290+
</div>
291+
292+
{/* Contact Support Section */}
293+
{!searchQuery && (
294+
<Card className="bg-gradient-to-br from-blue-500/10 to-purple-600/10 border-zinc-800">
295+
<CardHeader>
296+
<CardTitle className="text-white flex items-center gap-2">
297+
<MessageSquare className="h-5 w-5 text-blue-400" />
298+
Still Need Help?
299+
</CardTitle>
300+
<CardDescription className="text-zinc-300">
301+
Our support team is here to assist you
302+
</CardDescription>
303+
</CardHeader>
304+
<CardContent className="space-y-4">
305+
<div className="flex items-start gap-3 text-sm">
306+
<Mail className="h-5 w-5 text-blue-400 flex-shrink-0 mt-0.5" />
307+
<div>
308+
<p className="text-white font-medium">Email Support</p>
309+
<p className="text-zinc-400">support@codeunia.com</p>
310+
<p className="text-zinc-500 text-xs mt-1">Response time: 24-48 hours</p>
311+
</div>
312+
</div>
313+
<div className="flex items-start gap-3 text-sm">
314+
<Clock className="h-5 w-5 text-blue-400 flex-shrink-0 mt-0.5" />
315+
<div>
316+
<p className="text-white font-medium">Support Hours</p>
317+
<p className="text-zinc-400">Monday - Friday: 9:00 AM - 6:00 PM IST</p>
318+
<p className="text-zinc-400">Saturday: 10:00 AM - 4:00 PM IST</p>
319+
</div>
320+
</div>
321+
<Button className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white border-0">
322+
<Mail className="h-4 w-4 mr-2" />
323+
Contact Support
324+
</Button>
325+
</CardContent>
326+
</Card>
327+
)}
328+
329+
{/* System Status */}
330+
{!searchQuery && (
331+
<Card className="bg-zinc-900 border-zinc-800">
332+
<CardHeader>
333+
<CardTitle className="text-white flex items-center gap-2">
334+
<CheckCircle className="h-5 w-5 text-green-500" />
335+
System Status
336+
</CardTitle>
337+
</CardHeader>
338+
<CardContent>
339+
<div className="flex items-center justify-between">
340+
<div>
341+
<p className="text-white font-medium">All Systems Operational</p>
342+
<p className="text-zinc-400 text-sm">Last checked: Just now</p>
343+
</div>
344+
<Button variant="ghost" className="text-blue-400 hover:text-blue-300 hover:bg-blue-500/10">
345+
View Details
346+
<ExternalLink className="h-4 w-4 ml-2" />
347+
</Button>
348+
</div>
349+
</CardContent>
350+
</Card>
351+
)}
352+
</div>
353+
</div>
354+
</div>
355+
)
356+
}

0 commit comments

Comments
 (0)