ra/auditly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update onboarding colors and add image upload

Browse Source
This commit is contained in:
Ra
2025-08-20 11:20:28 -07:00
parent 875280cdac
commit 9332a48542
12 changed files with 2078 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1316
pages/EmployeeQuestionnaire.tsx
View File

File diff suppressed because it is too large Load Diff

49
pages/EmployeeQuestionnaireMerged.tsx
View File

@@ -68,11 +68,10 @@ const QuestionInput: React.FC<{
<button
key={ratingValue}
onClick={() => onChange(ratingValue.toString())}
className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${
isSelected
? 'bg-Brand-Orange text-white'
className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${isSelected
? 'bg-Brand-Orange text-white'
: 'bg-Neutrals-NeutralSlate100 text-Neutrals-NeutralSlate700 hover:bg-Neutrals-NeutralSlate200'
}`}
}`}
>
{ratingValue}
</button>
@@ -93,29 +92,25 @@ const QuestionInput: React.FC<{
<div className="self-stretch inline-flex justify-center items-center gap-3">
<div
onClick={() => onChange('No')}
className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${
value === 'No'
? 'bg-Neutrals-NeutralSlate800'
className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${value === 'No'
? 'bg-Neutrals-NeutralSlate800'
: 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'
}`}
}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${
value === 'No' ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'
}`}>
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${value === 'No' ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'
}`}>
No
</div>
</div>
<div
onClick={() => onChange('Yes')}
className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${
value === 'Yes'
? 'bg-Neutrals-NeutralSlate800'
className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${value === 'Yes'
? 'bg-Neutrals-NeutralSlate800'
: 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'
}`}
}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${
value === 'Yes' ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'
}`}>
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${value === 'Yes' ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'
}`}>
Yes
</div>
</div>
@@ -212,9 +207,9 @@ const NavigationButtons: React.FC<{
};
// Welcome Screen Component
const WelcomeScreen: React.FC<{
onStart: () => void;
currentEmployee?: any;
const WelcomeScreen: React.FC<{
onStart: () => void;
currentEmployee?: any;
isInviteFlow: boolean;
error?: string;
}> = ({ onStart, currentEmployee, isInviteFlow, error }) => {
@@ -360,11 +355,11 @@ const EmployeeQuestionnaireMerged: React.FC = () => {
const location = useLocation();
const params = useParams();
const { user } = useAuth();
// Check if this is an invite-based flow (no auth/org needed)
const inviteCode = params.inviteCode;
const isInviteFlow = !!inviteCode;
// Only use org context for authenticated flows
let submitEmployeeAnswers, generateEmployeeReport, employees;
if (!isInviteFlow) {
@@ -544,7 +539,7 @@ const EmployeeQuestionnaireMerged: React.FC = () => {
} catch (reportError) {
console.error('Failed to generate report:', reportError);
}
// Navigate to completion
setCurrentStep(totalSteps + 1); // Thank you page
return;
@@ -623,7 +618,7 @@ const EmployeeQuestionnaireMerged: React.FC = () => {
</div>
<h1 className="text-3xl font-bold text-[--text-primary] mb-4">Invitation Error</h1>
<p className="text-[--text-secondary] mb-6">{error}</p>
<button
<button
onClick={() => window.location.href = '/'}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
@@ -638,7 +633,7 @@ const EmployeeQuestionnaireMerged: React.FC = () => {
if (currentStep === 0) {
// Welcome screen
return (
<WelcomeScreen
<WelcomeScreen
onStart={handleNext}
currentEmployee={currentEmployee}
isInviteFlow={isInviteFlow}
@@ -652,7 +647,7 @@ const EmployeeQuestionnaireMerged: React.FC = () => {
// Question step
const question = visibleQuestions[currentStep - 1];
const isLastStep = currentStep === totalSteps;
return (
<QuestionStep
question={question}

90
pages/LoginNew.tsx
View File

@@ -1,90 +0,0 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
const LoginNew: React.FC = () => {
const [email, setEmail] = useState('');
const [isLoading, setIsLoading] = useState(false);
const { login } = useAuth();
const navigate = useNavigate();
const handleLogin = async () => {
if (!email) return;
setIsLoading(true);
try {
await login(email);
navigate('/company-wiki');
} catch (error) {
console.error('Login failed:', error);
} finally {
setIsLoading(false);
}
};
return (
<div className="w-[1440px] h-[810px] bg-Neutrals-NeutralSlate0 inline-flex justify-start items-end overflow-hidden">
<div className="flex-1 self-stretch px-32 py-48 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
<div className="w-12 h-12 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
<div className="left-[12px] top-[9.33px] absolute">
<svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M2.57425 17.8128C3.11852 18.3639 3.11851 19.2575 2.57423 19.8087L2.54635 19.8369C2.00207 20.3881 1.11963 20.3881 0.575357 19.8369C0.0310869 19.2857 0.0310953 18.3921 0.575376 17.841L0.603251 17.8128C1.14753 17.2616 2.02998 17.2616 2.57425 17.8128Z" fill="url(#paint0_linear_710_14140)" />
<path opacity="0.7" fillRule="evenodd" clipRule="evenodd" d="M9.12599 18.2379C9.66928 18.7901 9.66769 19.6837 9.12243 20.2338L5.26187 24.1291C4.71661 24.6792 3.83416 24.6776 3.29087 24.1255C2.74758 23.5733 2.74918 22.6797 3.29444 22.1296L7.155 18.2343C7.70026 17.6842 8.5827 17.6858 9.12599 18.2379Z" fill="url(#paint1_linear_710_14140)" />
<defs>
<linearGradient id="paint0_linear_710_14140" x1="1.5748" y1="17.3994" x2="1.5748" y2="20.2503" gradientUnits="userSpaceOnUse">
<stop stopColor="white" stopOpacity="0.8" />
<stop offset="1" stopColor="white" stopOpacity="0.5" />
</linearGradient>
<linearGradient id="paint1_linear_710_14140" x1="6.20843" y1="17.8228" x2="6.20843" y2="24.5406" gradientUnits="userSpaceOnUse">
<stop stopColor="white" stopOpacity="0.8" />
<stop offset="1" stopColor="white" stopOpacity="0.5" />
</linearGradient>
</defs>
</svg>
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-2xl font-semibold font-['Inter'] leading-8">Welcome to Auditly</div>
<div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">Sign in to your account to continue</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-4">
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">Email Address</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
placeholder="Enter your email address"
onKeyPress={(e) => e.key === 'Enter' && handleLogin()}
/>
</div>
</div>
</div>
<button
onClick={handleLogin}
disabled={!email || isLoading}
className="self-stretch px-6 py-3.5 bg-Brand-Orange rounded-[999px] inline-flex justify-center items-center gap-2 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
>
<div className="justify-center text-Neutrals-NeutralSlate0 text-base font-medium font-['Inter'] leading-normal">
{isLoading ? 'Signing in...' : 'Sign In'}
</div>
</button>
<div className="self-stretch text-center text-Neutrals-NeutralSlate500 text-sm font-normal font-['Inter'] leading-tight">
Don't have an account? Contact your administrator.
</div>
</div>
</div>
</div>
</div>
);
};
export default LoginNew;

10
pages/Onboarding.tsx
View File

@@ -4,6 +4,7 @@ import { useOrg } from '../contexts/OrgContext';
import { EnhancedFigmaQuestion, FigmaQuestionCard, EnhancedFigmaInput } from '../components/figma/EnhancedFigmaQuestion';
import { FigmaInput, FigmaSelect } from '../components/figma/FigmaInput';
import { FigmaMultipleChoice } from '../components/figma/FigmaMultipleChoice';
import { StoredImage } from '../services/imageStorageService';
interface OnboardingData {
// Step 0: Company Details
@@ -51,6 +52,7 @@ const Onboarding: React.FC = () => {
const [step, setStep] = useState(0);
const [isGeneratingReport, setIsGeneratingReport] = useState(false);
const [companyLogo, setCompanyLogo] = useState<StoredImage | null>(null);
const [formData, setFormData] = useState<OnboardingData>({
companyName: org?.name || '',
yourName: '',
@@ -174,6 +176,10 @@ const Onboarding: React.FC = () => {
setFormData(prev => ({ ...prev, [field]: value }));
};
const handleImageUploaded = (image: StoredImage | null) => {
setCompanyLogo(image);
};
const canProceed = () => {
switch (step) {
case 0: // Company Details
@@ -365,6 +371,10 @@ const Onboarding: React.FC = () => {
? 'Complete Setup'
: 'Next'
}
// Image upload props
orgId={org?.orgId}
onImageUploaded={handleImageUploaded}
currentImage={companyLogo}
>
{renderStepContent()}
</EnhancedFigmaQuestion>