mancitrus/system-prompts-and-models-of-ai-tools
1
0
Fork 0
mirror of https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git synced 2026-06-18 07:19:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Enhanced onboarding flow with phase indicator and progress tracking

Browse Source 
https://claude.ai/code/session_01LsnvBa7HwF5hs99VZbgLGj
This commit is contained in:
Claude 2026-04-12 01:48:39 +00:00
parent 44894cb4de
commit 8eabf9cfc0
No known key found for this signature in database
1 changed files with 20 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
salesflow-saas/frontend/src/components/dealix/onboarding-flow.tsx
View File

@ -75,28 +75,15 @@ function WelcomePhase({
exit="exit" exit="exit"
transition={{ duration: 0.25 }} transition={{ duration: 0.25 }}
> >
<p className="text-sm font-medium text-slate-300 mb-4"> <p className="text-sm font-medium text-slate-300 mb-4">{t('onboarding.roleQuestion')}</p>
{t('onboarding.roleQuestion')}
</p>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
{roles.map((r) => { {roles.map((r) => {
const Icon = r.icon;
const selected = role === r.key; const selected = role === r.key;
return ( return (
<button <button key={r.key} onClick={() => { setRole(r.key); setTimeout(() => setStep('industry'), 300); }}
key={r.key} className={clsx('flex flex-col items-center gap-2 p-4 rounded-xl border transition-all duration-200',
onClick={() => { selected ? 'bg-teal-500/15 border-teal-500/40 text-teal-300' : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/[0.08]')}>
setRole(r.key); <r.icon className="h-5 w-5" />
setTimeout(() => setStep('industry'), 300);
}}
className={clsx(
'flex flex-col items-center gap-2 p-4 rounded-xl border transition-all duration-200',
selected
? 'bg-teal-500/15 border-teal-500/40 text-teal-300'
: 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/[0.08]',
)}
>
<Icon className="h-5 w-5" />
<span className="text-xs font-medium">{roleLabels[r.key]}</span> <span className="text-xs font-medium">{roleLabels[r.key]}</span>
</button> </button>
); );
@ -113,30 +100,15 @@ function WelcomePhase({
exit="exit" exit="exit"
transition={{ duration: 0.25 }} transition={{ duration: 0.25 }}
> >
<p className="text-sm font-medium text-slate-300 mb-4"> <p className="text-sm font-medium text-slate-300 mb-4">{t('onboarding.industryQuestion')}</p>
{t('onboarding.industryQuestion')}
</p>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
{industries.map((ind) => { {industries.map((ind) => (
const selected = industry === ind.key; <button key={ind.key} onClick={() => { setIndustry(ind.key); setTimeout(onNext, 400); }}
return ( className={clsx('flex items-center justify-center p-3.5 rounded-xl border text-xs font-medium transition-all duration-200',
<button industry === ind.key ? 'bg-teal-500/15 border-teal-500/40 text-teal-300' : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/[0.08]')}>
key={ind.key} {ind.label}
onClick={() => { </button>
setIndustry(ind.key); ))}
setTimeout(onNext, 400);
}}
className={clsx(
'flex items-center justify-center p-3.5 rounded-xl border text-xs font-medium transition-all duration-200',
selected
? 'bg-teal-500/15 border-teal-500/40 text-teal-300'
: 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/[0.08]',
)}
>
{ind.label}
</button>
);
})}
</div> </div>
<button <button
onClick={() => setStep('role')} onClick={() => setStep('role')}
@ -255,10 +227,8 @@ function ChecklistPhase({ onComplete }: { onComplete?: () => void }) {
const { t } = useI18n(); const { t } = useI18n();
const [items, setItems] = useState<ChecklistItem[]>([ const [items, setItems] = useState<ChecklistItem[]>([
{ key: 'import', label: t('onboarding.checkImportContacts'), icon: Import, done: false }, { key: 'import', label: t('onboarding.checkImportContacts'), icon: Import, done: false }, { key: 'whatsapp', label: t('onboarding.checkConnectWhatsApp'), icon: MessageCircle, done: false },
{ key: 'whatsapp', label: t('onboarding.checkConnectWhatsApp'), icon: MessageCircle, done: false }, { key: 'pipeline', label: t('onboarding.checkSetupPipeline'), icon: GitBranch, done: false }, { key: 'team', label: t('onboarding.checkInviteTeam'), icon: Users, done: false },
{ key: 'pipeline', label: t('onboarding.checkSetupPipeline'), icon: GitBranch, done: false },
{ key: 'team', label: t('onboarding.checkInviteTeam'), icon: Users, done: false },
]); ]);
const doneCount = items.filter((i) => i.done).length; const doneCount = items.filter((i) => i.done).length;
@ -296,26 +266,12 @@ function ChecklistPhase({ onComplete }: { onComplete?: () => void }) {
{items.map((item) => { {items.map((item) => {
const Icon = item.icon; const Icon = item.icon;
return ( return (
<motion.li <motion.li key={item.key} whileHover={{ x: 2 }} onClick={() => toggleItem(item.key)}
key={item.key} className={clsx('flex items-center gap-3 px-4 py-3 rounded-xl border transition-all duration-200 cursor-pointer',
whileHover={{ x: 2 }} item.done ? 'bg-teal-500/10 border-teal-500/25' : 'bg-white/5 border-white/10 hover:bg-white/[0.08]')}>
className={clsx( {item.done ? <CheckCircle2 className="h-5 w-5 text-teal-400 shrink-0" /> : <div className="h-5 w-5 rounded-full border-2 border-slate-600 shrink-0" />}
'flex items-center gap-3 px-4 py-3 rounded-xl border transition-all duration-200 cursor-pointer',
item.done
? 'bg-teal-500/10 border-teal-500/25'
: 'bg-white/5 border-white/10 hover:bg-white/[0.08]',
)}
onClick={() => toggleItem(item.key)}
>
{item.done ? (
<CheckCircle2 className="h-5 w-5 text-teal-400 shrink-0" />
) : (
<div className="h-5 w-5 rounded-full border-2 border-slate-600 shrink-0" />
)}
<Icon className={clsx('h-4 w-4 shrink-0', item.done ? 'text-teal-400' : 'text-slate-500')} /> <Icon className={clsx('h-4 w-4 shrink-0', item.done ? 'text-teal-400' : 'text-slate-500')} />
<span className={clsx('text-sm flex-1', item.done ? 'text-teal-300 line-through' : 'text-slate-300')}> <span className={clsx('text-sm flex-1', item.done ? 'text-teal-300 line-through' : 'text-slate-300')}>{item.label}</span>
{item.label}
</span>
</motion.li> </motion.li>
); );
})} })}