90 lines
4.0 KiB
JavaScript
90 lines
4.0 KiB
JavaScript
import { useState } from 'react'
|
||
import { Icon } from '../ui/primitives'
|
||
import { useToast } from '../ui/Toast'
|
||
|
||
const FAQS = [
|
||
{ q: 'How do I create a new job requisition?', a: 'Navigate to Jobs and click "Create Job". Fill in the required fields marked with an asterisk and click Save. The job will immediately appear in your listings.' },
|
||
{ q: 'How does the AI candidate score work?', a: 'The AI score (0–100) evaluates how well a candidate matches the job requirements based on skills, experience, and education. Higher scores indicate stronger matches.' },
|
||
{ q: 'Can I move candidates between pipeline stages?', a: 'Yes. Open the Pipeline view and simply drag any candidate card between stage columns. The candidate’s status updates automatically.' },
|
||
{ q: 'How do I schedule an interview?', a: 'Go to Interviews or Calendar and click "Schedule Interview". Select the candidate, round, date, time, and interviewers.' },
|
||
{ q: 'How do I export reports?', a: 'On the Reports page, use the "Export Report" button for a full PDF, or the CSV buttons on individual tables.' },
|
||
]
|
||
|
||
const RESOURCES = [
|
||
{ icn: 'file', t: 'Documentation', d: 'Complete product guides', cls: 'i-indigo' },
|
||
{ icn: 'video', t: 'Video Tutorials', d: 'Watch step-by-step walkthroughs', cls: 'i-red' },
|
||
{ icn: 'message', t: 'Live Chat', d: 'Chat with our support team', cls: 'i-green' },
|
||
{ icn: 'users', t: 'Community', d: 'Connect with other recruiters', cls: 'i-purple' },
|
||
]
|
||
|
||
export default function Help() {
|
||
const { toast } = useToast()
|
||
const [open, setOpen] = useState(null)
|
||
|
||
return (
|
||
<div className="page">
|
||
<div className="page-head">
|
||
<div>
|
||
<h1 className="page-title">Help Center</h1>
|
||
<p className="page-sub">Find answers and get support</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card brand-hero mb-18">
|
||
<div className="card-body" style={{ padding: 32, textAlign: 'center' }}>
|
||
<h2 style={{ fontSize: 22, marginBottom: 8 }}>How can we help you?</h2>
|
||
<p style={{ opacity: 0.85, marginBottom: 18 }}>
|
||
Search our knowledge base or browse the topics below
|
||
</p>
|
||
<div className="topbar-search" style={{ maxWidth: 480, margin: '0 auto' }}>
|
||
<Icon name="search" />
|
||
<input placeholder="Search help articles…" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid g-kpi mb-18">
|
||
{RESOURCES.map((r) => (
|
||
<div key={r.t} className="card" style={{ cursor: 'pointer' }} onClick={() => toast(`Opening ${r.t}`, 'info')}>
|
||
<div className="card-body" style={{ textAlign: 'center' }}>
|
||
<span className={`kpi-icn ${r.cls}`} style={{ margin: '0 auto 12px', width: 48, height: 48, borderRadius: 14 }}>
|
||
<Icon name={r.icn} />
|
||
</span>
|
||
<div className="fw-600">{r.t}</div>
|
||
<div className="lr-sub" style={{ marginTop: 4 }}>{r.d}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="card">
|
||
<div className="card-head"><div><h3>Frequently Asked Questions</h3></div></div>
|
||
<div className="card-body">
|
||
{FAQS.map((f, i) => (
|
||
<div
|
||
key={f.q}
|
||
className="setting-row"
|
||
style={{ cursor: 'pointer', flexDirection: 'column', alignItems: 'stretch' }}
|
||
onClick={() => setOpen(open === i ? null : i)}
|
||
>
|
||
<div className="flex items-center" style={{ justifyContent: 'space-between' }}>
|
||
<h4>{f.q}</h4>
|
||
<span
|
||
style={{
|
||
color: 'var(--text-3)',
|
||
transition: '.2s',
|
||
transform: open === i ? 'rotate(90deg)' : 'rotate(0deg)',
|
||
}}
|
||
>
|
||
<Icon name="chevron-right" />
|
||
</span>
|
||
</div>
|
||
{open === i && <p style={{ marginTop: 10 }}>{f.a}</p>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|