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

Update

Browse Source
This commit is contained in:
Ra
2025-08-24 00:48:41 -07:00
parent 9c20073755
commit f2145edf56
37 changed files with 2621 additions and 2692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/CompanyWiki/CompanyWikiCompletedState.tsx
View File

@@ -59,7 +59,7 @@ export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps>
{/* Table of Contents */}
<div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start">
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
<div className="flex-1 justify-start text-Neutrals-NeutralSlate950 dark:text-Neutrals-NeutralSlate50 text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
</div>
<div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
{sections.map((section, index) => {
@@ -70,14 +70,14 @@ export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps>
<div
key={index}
onClick={() => onSectionClick?.(sectionNumber)}
className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer hover:bg-Main-BG-Gray-50 dark:hover:bg-Neutrals-NeutralSlate700 ${isActive ? 'bg-Main-BG-Gray-100 dark:bg-Neutrals-NeutralSlate800 shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : ''}`}
className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer hover:bg-Main-BG-Gray-50 dark:hover:bg-[--Neutrals-NeutralSlate700] ${isActive ? 'bg-Main-BG-Gray-100 dark:bg-[--Neutrals-NeutralSlate700] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : ''}`}
>
<div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-Brand-Orange' : 'bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate600'}`}>
<div className={`w-4 text-center justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950 dark:text-Neutrals-NeutralSlate200'}`}>
{sectionNumber}
</div>
</div>
<div className={`flex-1 justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100' : 'text-Text-Gray-500 dark:text-Neutrals-NeutralSlate400'}`}>
<div className={`flex-1 justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-[--Neutrals-NeutralSlate800] dark:text-Neutrals-NeutralSlate100' : 'text-Text-Gray-500 dark:text-Neutrals-NeutralSlate400'}`}>
{section}
</div>
</div>
@@ -89,25 +89,25 @@ export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps>
{/* Main Content */}
<div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
<div className="flex-1 justify-start text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100 text-xl font-medium font-['Neue_Montreal'] leading-normal">
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] dark:text-[--Neutrals-NeutralSlate800] text-xl font-medium font-['Neue_Montreal'] leading-normal">
{sections[activeSection - 1]}
</div>
</div>
<div className="self-stretch px-5 flex flex-col justify-start items-start gap-4">
{qaItems.map((item, index) => (
<div key={index} className="self-stretch p-3 bg-Neutrals-NeutralSlate100 dark:bg-Neutrals-NeutralSlate800 rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
<div key={index} className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
<div className="self-stretch px-3 py-px inline-flex justify-start items-center gap-2.5">
<div className="flex-1 flex justify-center items-center gap-3">
<div className="w-3 self-stretch justify-start text-Neutrals-NeutralSlate300 dark:text-Neutrals-NeutralSlate500 text-base font-semibold font-['Inter'] leading-normal">Q</div>
<div className="flex-1 justify-start text-Neutrals-NeutralSlate600 dark:text-Neutrals-NeutralSlate300 text-sm font-medium font-['Inter'] leading-tight">
<div className="w-3 self-stretch justify-start text-[--Neutrals-NeutralSlate300] dark:text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">Q</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate600] dark:text-[--Neutrals-NeutralSlate600] text-sm font-medium font-['Inter'] leading-tight">
{item.question}
</div>
</div>
</div>
<div className="self-stretch px-3 py-2 bg-Neutrals-NeutralSlate0 dark:bg-Neutrals-NeutralSlate900 rounded-[10px] inline-flex justify-between items-center">
<div className="self-stretch px-3 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-[10px] inline-flex justify-between items-center">
<div className="flex-1 flex justify-start items-start gap-3">
<div className="w-3.5 h-6 justify-center text-Neutrals-NeutralSlate300 dark:text-Neutrals-NeutralSlate500 text-base font-semibold font-['Inter'] leading-normal">A</div>
<div className="flex-1 justify-start text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100 text-base font-normal font-['Inter'] leading-normal whitespace-pre-line">
<div className="w-3.5 h-6 justify-center text-[--Neutrals-NeutralSlate300] dark:text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">A</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] dark:text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal whitespace-pre-line">
{item.answer}
</div>
</div>
@@ -129,17 +129,17 @@ export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps>
</div>
</div>
<div className="self-stretch p-3 bg-Neutrals-NeutralSlate100 rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
<div className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
<div className="self-stretch px-3 py-px inline-flex justify-start items-center gap-2.5">
<div className="flex-1 flex justify-center items-center gap-3">
<div className="w-3 self-stretch justify-start text-Neutrals-NeutralSlate300 text-base font-semibold font-['Inter'] leading-normal">Q</div>
<div className="flex-1 justify-start text-Neutrals-NeutralSlate600 text-sm font-medium font-['Inter'] leading-tight">What is the mission of your company?</div>
<div className="w-3 self-stretch justify-start text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">Q</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate600] text-sm font-medium font-['Inter'] leading-tight">What is the mission of your company?</div>
</div>
</div>
<div className="self-stretch px-3 py-2 bg-Light-Grays-l-gray08 rounded-[10px] inline-flex justify-between items-center">
<div className="flex-1 flex justify-start items-start gap-3">
<div className="w-3.5 h-6 justify-center text-Neutrals-NeutralSlate300 text-base font-semibold font-['Inter'] leading-normal">A</div>
<div className="flex-1 justify-start text-Neutrals-NeutralSlate800 text-base font-normal font-['Inter'] leading-normal">The mission is to create value as well as working</div>
<div className="w-3.5 h-6 justify-center text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">A</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">The mission is to create value as well as working</div>
</div>
</div>
</div>

18
src/components/CompanyWiki/CompanyWikiEmptyState.tsx
View File

@@ -17,14 +17,14 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
<div className="flex-1 self-stretch inline-flex justify-start items-center">
<div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 inline-flex flex-col justify-start items-start">
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
<div className="flex-1 justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
</div>
<div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
<div className="self-stretch p-2 bg-Main-BG-Gray-100 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="h-5 p-0.5 bg-Brand-Orange rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-Neutrals-NeutralSlate0 text-xs font-medium font-['Inter'] leading-none">1</div>
<div className="w-4 text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none">1</div>
</div>
<div className="flex-1 justify-start text-Neutrals-NeutralSlate800 text-xs font-medium font-['Inter'] leading-none">Company Overview & Vision</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-xs font-medium font-['Inter'] leading-none">Company Overview & Vision</div>
</div>
<div className="self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="h-5 p-0.5 bg-Text-Gray-100 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
@@ -74,14 +74,14 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Empty State Illustration */}
<div className="w-80 h-64 mb-8 relative">
{/* Placeholder for illustration - would contain the actual empty state SVG */}
<div className="w-full h-full bg-Neutrals-NeutralSlate100 rounded-2xl flex items-center justify-center">
<div className="w-full h-full bg-[--Neutrals-NeutralSlate100] rounded-2xl flex items-center justify-center">
<div className="text-center">
<div className="w-16 h-16 bg-Neutrals-NeutralSlate200 rounded-full mx-auto mb-4 flex items-center justify-center">
<div className="w-16 h-16 bg-[--Neutrals-NeutralSlate200] rounded-full mx-auto mb-4 flex items-center justify-center">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 30V18.6667C12 17.3867 12 16.7467 12.1453 16.248C12.2731 15.8071 12.5171 15.4109 12.848 15.1053C13.2133 14.7667 13.7066 14.6667 14.6933 14.6667H17.3067C18.2934 14.6667 18.7867 14.7667 19.152 15.1053C19.4829 15.4109 19.7269 15.8071 19.8547 16.248C20 16.7467 20 17.3867 20 18.6667V30M14.6903 3.68533L6.04715 11.5188C5.44269 12.0684 5.14047 12.3431 4.92271 12.6778C4.73015 12.9739 4.58613 13.3073 4.49871 13.6608C4.4 14.0575 4.4 14.4803 4.4 15.3261V23.7333C4.4 25.2267 4.4 25.9733 4.69065 26.544C4.94631 27.0458 5.35421 27.4537 5.85603 27.7093C6.42669 28 7.17323 28 8.66667 28H23.3333C24.8268 28 25.5733 28 26.144 27.7093C26.6458 27.4537 27.0537 27.0458 27.3093 26.544C27.6 25.9733 27.6 25.2267 27.6 23.7333V15.3261C27.6 14.4803 27.6 14.0575 27.5013 13.6608C27.4139 13.3073 27.2699 12.9739 27.0773 12.6778C26.8595 12.3431 26.5573 12.0684 25.9529 11.5188L17.3097 3.68533C16.8413 3.27241 16.6071 3.06595 16.3485 2.98821C16.1203 2.9184 15.8797 2.9184 15.6515 2.98821C15.3929 3.06595 15.1587 3.27241 14.6903 3.68533Z" stroke="var(--Neutrals-NeutralSlate400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="text-Neutrals-NeutralSlate600 text-sm">Company Wiki Empty State</div>
<div className="text-[--Neutrals-NeutralSlate600] text-sm">Company Wiki Empty State</div>
</div>
</div>
</div>
@@ -89,16 +89,16 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Progress and Call to Action */}
<div className="text-center max-w-md">
<div className="mb-6">
<div className="text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal mb-2">
<div className="text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal mb-2">
You're {progress}% Done
</div>
<div className="text-Neutrals-NeutralSlate600 text-base leading-normal">
<div className="text-[--Neutrals-NeutralSlate600] text-base leading-normal">
Complete your onboarding to unlock your Company Wiki
</div>
</div>
{/* Progress Bar */}
<div className="w-full bg-Neutrals-NeutralSlate200 rounded-full h-2 mb-8">
<div className="w-full bg-[--Neutrals-NeutralSlate200] rounded-full h-2 mb-8">
<div
className="bg-Brand-Orange h-2 rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}

20
src/components/CompanyWiki/CompanyWikiEmptyStateDark.tsx
View File

@@ -29,7 +29,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Table of Contents */}
<div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start">
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
<div className="flex-1 justify-start text-Neutrals-NeutralSlate950 dark:text-Neutrals-NeutralSlate50 text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
</div>
<div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
{sections.map((section, index) => {
@@ -39,14 +39,14 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
return (
<div
key={index}
className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden ${isActive ? 'bg-Main-BG-Gray-100 dark:bg-Neutrals-NeutralSlate800 shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'hover:bg-Main-BG-Gray-50 dark:hover:bg-Neutrals-NeutralSlate700'}`}
className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden ${isActive ? 'bg-Main-BG-Gray-100 dark:bg-[--Neutrals-NeutralSlate800] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'hover:bg-Main-BG-Gray-50 dark:hover:bg-Neutrals-NeutralSlate700'}`}
>
<div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-Brand-Orange' : 'bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate600'}`}>
<div className={`w-4 text-center justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950 dark:text-Neutrals-NeutralSlate200'}`}>
{sectionNumber}
</div>
</div>
<div className={`flex-1 justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100' : 'text-Text-Gray-500 dark:text-Neutrals-NeutralSlate400'}`}>
<div className={`flex-1 justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-[--Neutrals-NeutralSlate800] dark:text-Neutrals-NeutralSlate100' : 'text-Text-Gray-500 dark:text-Neutrals-NeutralSlate400'}`}>
{section}
</div>
</div>
@@ -58,14 +58,14 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Main Content */}
<div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
<div className="flex-1 justify-start text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100 text-xl font-medium font-['Neue_Montreal'] leading-normal">
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] dark:text-[--Neutrals-NeutralSlate800] text-xl font-medium font-['Neue_Montreal'] leading-normal">
Company Overview & Vision
</div>
</div>
<div className="self-stretch flex-1 p-5 flex justify-center items-center">
<div className="w-[440px] flex flex-col justify-center items-center gap-8">
{/* Progress Illustration Placeholder */}
<div className="w-[280px] h-[200px] bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate700 rounded-2xl flex items-center justify-center">
<div className="w-[280px] h-[200px] bg-Text-Gray-100 dark:bg-[--Neutrals-NeutralSlate700] rounded-2xl flex items-center justify-center">
<div className="text-center">
<div className="w-16 h-16 mx-auto mb-4 bg-Brand-Orange rounded-full flex items-center justify-center">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="text-white">
@@ -73,21 +73,21 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
<circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="2" />
</svg>
</div>
<div className="text-Text-Gray-600 dark:text-Neutrals-NeutralSlate300 text-sm">Progress Illustration</div>
<div className="text-Text-Gray-600 dark:text-[--Neutrals-NeutralSlate300] text-sm">Progress Illustration</div>
</div>
</div>
{/* Progress Content */}
<div className="self-stretch flex flex-col justify-center items-center gap-4 text-center">
<div className="text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100 text-2xl font-semibold font-['Neue_Montreal'] leading-8">
<div className="text-[--Neutrals-NeutralSlate800] dark:text-[--Neutrals-NeutralSlate800] text-2xl font-semibold font-['Neue_Montreal'] leading-8">
You're {progress}% Done
</div>
<div className="self-stretch text-Text-Gray-600 dark:text-Neutrals-NeutralSlate300 text-base font-normal font-['Inter'] leading-normal">
<div className="self-stretch text-Text-Gray-600 dark:text-[--Neutrals-NeutralSlate300] text-base font-normal font-['Inter'] leading-normal">
Complete your company onboarding to unlock your company wiki and comprehensive insights about your organization.
</div>
{/* Progress Bar */}
<div className="self-stretch h-2 bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate700 rounded-full overflow-hidden">
<div className="self-stretch h-2 bg-Text-Gray-100 dark:bg-[--Neutrals-NeutralSlate700] rounded-full overflow-hidden">
<div
className="h-full bg-Brand-Orange rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
@@ -97,7 +97,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Action Button */}
<button
onClick={onCompleteOnboarding}
className="w-full px-6 py-3 bg-Brand-Orange hover:bg-orange-600 text-Neutrals-NeutralSlate0 text-base font-medium font-['Inter'] leading-normal rounded-xl transition-colors"
className="w-full px-6 py-3 bg-Brand-Orange hover:bg-orange-600 text-[--Neutrals-NeutralSlate0] text-base font-medium font-['Inter'] leading-normal rounded-xl transition-colors"
>
Complete Onboarding
</button>

16
src/components/CompanyWiki/InviteEmployeesModal.tsx
View File

@@ -27,15 +27,15 @@ export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="w-[420px] bg-Neutrals-NeutralSlate0 dark:bg-Neutrals-NeutralSlate900 rounded-3xl shadow-[0px_25px_50px_-12px_rgba(0,0,0,0.25)] flex flex-col justify-start items-start overflow-hidden">
<div className="w-[420px] bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-3xl shadow-[0px_25px_50px_-12px_rgba(0,0,0,0.25)] flex flex-col justify-start items-start overflow-hidden">
{/* Header */}
<div className="self-stretch p-6 inline-flex justify-between items-center">
<div className="flex justify-start items-center gap-2.5">
<div className="justify-start text-Text-Dark-950 dark:text-Neutrals-NeutralSlate50 text-lg font-semibold font-['Inter'] leading-7">Invite employees</div>
<div className="justify-start text-Text-Dark-950 dark:text-[--Neutrals-NeutralSlate50] text-lg font-semibold font-['Inter'] leading-7">Invite employees</div>
</div>
<button
onClick={onClose}
className="w-6 h-6 flex justify-center items-center hover:bg-Text-Gray-100 dark:hover:bg-Neutrals-NeutralSlate700 rounded"
className="w-6 h-6 flex justify-center items-center hover:bg-Text-Gray-100 dark:hover:bg-[--Neutrals-NeutralSlate700] rounded"
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M13 1L1 13M1 1L13 13" stroke="#666D80" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -46,16 +46,16 @@ export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
{/* Form */}
<form onSubmit={handleSubmit} className="self-stretch px-6 flex flex-col justify-start items-start gap-4">
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 dark:text-Neutrals-NeutralSlate50 text-sm font-medium font-['Inter'] leading-tight">
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
Email
</div>
<div className="self-stretch h-10 px-3 py-2 bg-Neutrals-NeutralSlate0 dark:bg-Neutrals-NeutralSlate800 rounded-lg border border-Outline-Outline-Gray-300 dark:border-Neutrals-NeutralSlate600 inline-flex justify-start items-center gap-2">
<div className="self-stretch h-10 px-3 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 dark:border-Neutrals-NeutralSlate600 inline-flex justify-start items-center gap-2">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email address"
className="flex-1 text-Neutrals-NeutralSlate950 dark:text-Neutrals-NeutralSlate50 text-sm font-normal font-['Inter'] leading-tight bg-transparent outline-none placeholder:text-Text-Gray-500 dark:placeholder:text-Neutrals-NeutralSlate400"
className="flex-1 text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight bg-transparent outline-none placeholder:text-Text-Gray-500 dark:placeholder:text-[--Neutrals-NeutralSlate950]"
autoFocus
/>
</div>
@@ -73,14 +73,14 @@ export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
<div className="flex justify-start items-start gap-3">
<button
onClick={onClose}
className="px-4 py-2 bg-Neutrals-NeutralSlate0 dark:bg-Neutrals-NeutralSlate800 rounded-lg border border-Outline-Outline-Gray-300 dark:border-Neutrals-NeutralSlate600 text-Neutrals-NeutralSlate700 dark:text-Neutrals-NeutralSlate200 text-sm font-medium font-['Inter'] leading-tight hover:bg-Text-Gray-50 dark:hover:bg-Neutrals-NeutralSlate700"
className="px-4 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 dark:border-Neutrals-NeutralSlate600 text-[--Neutrals-NeutralSlate700] dark:text-[--Neutrals-NeutralSlate700] text-sm font-medium font-['Inter'] leading-tight hover:bg-Text-Gray-50 dark:hover:bg-[--Neutrals-NeutralSlate0]"
>
Cancel
</button>
<button
onClick={handleSubmit}
disabled={!email.trim()}
className="px-4 py-2 bg-Brand-Orange rounded-lg text-Neutrals-NeutralSlate0 text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 bg-Brand-Orange rounded-lg text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
Send Invite
</button>

24
src/components/CompanyWiki/InviteMultipleEmployeesModal.tsx
View File

@@ -60,17 +60,17 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="w-[480px] bg-Neutrals-NeutralSlate0 dark:bg-Neutrals-NeutralSlate900 rounded-3xl shadow-[0px_25px_50px_-12px_rgba(0,0,0,0.25)] flex flex-col justify-start items-start overflow-hidden">
<div className="w-[480px] bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-3xl shadow-[0px_25px_50px_-12px_rgba(0,0,0,0.25)] flex flex-col justify-start items-start overflow-hidden">
{/* Header */}
<div className="self-stretch p-6 inline-flex justify-between items-center">
<div className="flex justify-start items-center gap-2.5">
<div className="justify-start text-Text-Dark-950 dark:text-Neutrals-NeutralSlate50 text-lg font-semibold font-['Inter'] leading-7">
<div className="justify-start text-Text-Dark-950 dark:text-[--Neutrals-NeutralSlate50] text-lg font-semibold font-['Inter'] leading-7">
Invite multiple employees
</div>
</div>
<button
onClick={onClose}
className="w-6 h-6 flex justify-center items-center hover:bg-Text-Gray-100 dark:hover:bg-Neutrals-NeutralSlate700 rounded"
className="w-6 h-6 flex justify-center items-center hover:bg-Text-Gray-100 dark:hover:bg-[--Neutrals-NeutralSlate700] rounded"
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M13 1L1 13M1 1L13 13" stroke="#666D80" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -81,10 +81,10 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
{/* Search Input with Dropdown */}
<div className="self-stretch px-6 flex flex-col justify-start items-start gap-4">
<div className="self-stretch flex flex-col justify-start items-start gap-1 relative">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
Search employees
</div>
<div className="self-stretch h-10 px-3 py-2 bg-Neutrals-NeutralSlate0 rounded-lg border border-Outline-Outline-Gray-300 inline-flex justify-start items-center gap-2">
<div className="self-stretch h-10 px-3 py-2 bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 inline-flex justify-start items-center gap-2">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="text-Text-Gray-400">
<path d="M15 15L11.15 11.15M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
@@ -97,13 +97,13 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
}}
onFocus={() => setShowDropdown(searchTerm.length > 0)}
placeholder="Type name or email to search..."
className="flex-1 text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight bg-transparent outline-none placeholder:text-Text-Gray-500"
className="flex-1 text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight bg-transparent outline-none placeholder:text-Text-Gray-500"
/>
</div>
{/* Dropdown */}
{showDropdown && filteredEmployees.length > 0 && (
<div className="absolute top-full left-0 right-0 mt-1 bg-Neutrals-NeutralSlate0 border border-Outline-Outline-Gray-200 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto">
<div className="absolute top-full left-0 right-0 mt-1 bg-[--Neutrals-NeutralSlate0] border border-Outline-Outline-Gray-200 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto">
{filteredEmployees.map((employee) => (
<button
key={employee.id}
@@ -114,7 +114,7 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
{employee.name.charAt(0)}
</div>
<div className="flex-1">
<div className="text-sm font-medium text-Neutrals-NeutralSlate950">{employee.name}</div>
<div className="text-sm font-medium text-[--Neutrals-NeutralSlate950]">{employee.name}</div>
<div className="text-xs text-Text-Gray-500">{employee.email}</div>
</div>
</button>
@@ -126,7 +126,7 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
{/* Selected Employees */}
{selectedEmployees.length > 0 && (
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="text-sm font-medium text-Neutrals-NeutralSlate950">
<div className="text-sm font-medium text-[--Neutrals-NeutralSlate950]">
Selected ({selectedEmployees.length})
</div>
<div className="self-stretch flex flex-wrap gap-2">
@@ -138,7 +138,7 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
<div className="w-5 h-5 bg-Brand-Orange rounded-full flex items-center justify-center text-white text-xs font-medium">
{employee.name.charAt(0)}
</div>
<span className="text-sm text-Neutrals-NeutralSlate950">{employee.name}</span>
<span className="text-sm text-[--Neutrals-NeutralSlate950]">{employee.name}</span>
<button
onClick={() => handleEmployeeRemove(employee.id)}
className="w-4 h-4 flex items-center justify-center hover:bg-Brand-Orange hover:bg-opacity-20 rounded-full"
@@ -159,14 +159,14 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
<div className="flex justify-start items-start gap-3">
<button
onClick={onClose}
className="px-4 py-2 bg-Neutrals-NeutralSlate0 rounded-lg border border-Outline-Outline-Gray-300 text-Neutrals-NeutralSlate700 text-sm font-medium font-['Inter'] leading-tight hover:bg-Text-Gray-50"
className="px-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 text-[--Neutrals-NeutralSlate700] text-sm font-medium font-['Inter'] leading-tight hover:bg-Text-Gray-50"
>
Cancel
</button>
<button
onClick={handleInvite}
disabled={selectedEmployees.length === 0}
className="px-4 py-2 bg-Brand-Orange rounded-lg text-Neutrals-NeutralSlate0 text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 bg-Brand-Orange rounded-lg text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
Send Invites ({selectedEmployees.length})
</button>

2
src/components/UiKit.tsx
View File

@@ -270,7 +270,7 @@ export const Layout = () => {
const { org } = useOrg();
return (
<div className="flex h-screen bg-Neutrals-NeutralSlate0">
<div className="flex h-screen bg-[--Neutrals-NeutralSlate0]">
<FigmaSidebar companyName={org?.name || "Auditly"} />
<main className="flex-1 overflow-y-auto">
<Outlet />

180
src/components/chat/ChatEmptyState.tsx
View File

@@ -1,180 +0,0 @@
import React from 'react';
interface SuggestionCardProps {
category: string;
title: string;
description: string;
icon: React.ReactNode;
onClick?: () => void;
}
const SuggestionCard: React.FC<SuggestionCardProps> = ({ category, title, description, icon, onClick }) => (
<div
className="p-4 bg-[var(--Neutrals-NeutralSlate0)] rounded-2xl border border-[var(--Neutrals-NeutralSlate200)] hover:border-[var(--Brand-Orange)] hover:shadow-sm transition-all cursor-pointer group"
onClick={onClick}
>
<div className="flex items-start gap-3">
<div className="w-10 h-10 bg-[var(--Brand-Orange)]/10 rounded-xl flex items-center justify-center text-[var(--Brand-Orange)] group-hover:bg-[var(--Brand-Orange)] group-hover:text-white transition-colors">
{icon}
</div>
<div className="flex-1 min-w-0">
<div className="text-xs text-[var(--Brand-Orange)] font-medium mb-1">{category}</div>
<div className="text-sm font-medium text-[var(--Neutrals-NeutralSlate950)] mb-1">{title}</div>
<div className="text-xs text-[var(--Neutrals-NeutralSlate500)] leading-relaxed">{description}</div>
</div>
</div>
</div>
);
interface CategoryTabProps {
label: string;
isActive: boolean;
onClick: () => void;
}
const CategoryTab: React.FC<CategoryTabProps> = ({ label, isActive, onClick }) => (
<button
onClick={onClick}
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${isActive
? 'bg-[var(--Brand-Orange)] text-white'
: 'bg-[var(--Neutrals-NeutralSlate100)] text-[var(--Neutrals-NeutralSlate600)] hover:bg-[var(--Neutrals-NeutralSlate200)]'
}`}
>
{label}
</button>
);
const ChatEmptyState: React.FC = () => {
const [activeCategory, setActiveCategory] = React.useState('All');
const categories = ['All', 'Performance', 'Culture', 'Reports', 'Analysis'];
const suggestions = [
{
category: 'Performance',
title: 'Analyze team performance trends',
description: 'Get insights on productivity patterns and improvement areas across your organization.',
icon: (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5 17.5013V5.83464C2.5 5.36793 2.5 5.13458 2.59083 4.95631C2.67072 4.79951 2.79821 4.67202 2.95501 4.59213C3.13327 4.5013 3.36662 4.5013 3.83333 4.5013H5.16667C5.63338 4.5013 5.86673 4.5013 6.04499 4.59213C6.20179 4.67202 6.32928 4.79951 6.40917 4.95631C6.5 5.13458 6.5 5.36793 6.5 5.83464V17.5013M17.5 17.5013V9.16797C17.5 8.70126 17.5 8.46791 17.4092 8.28965C17.3293 8.13285 17.2018 8.00536 17.045 7.92547C16.8667 7.83464 16.6334 7.83464 16.1667 7.83464H14.8333C14.3666 7.83464 14.1333 7.83464 13.955 7.92547C13.7982 8.00536 13.6707 8.13285 13.5908 8.28965C13.5 8.46791 13.5 8.70126 13.5 9.16797V17.5013M12.5 17.5013V2.5013C12.5 2.03459 12.5 1.80124 12.4092 1.62298C12.3293 1.46618 12.2018 1.33869 12.045 1.2588C11.8667 1.16797 11.6334 1.16797 11.1667 1.16797H9.83333C9.36662 1.16797 9.13327 1.16797 8.95501 1.2588C8.79821 1.33869 8.67072 1.46618 8.59083 1.62298C8.5 1.80124 8.5 2.03459 8.5 2.5013V17.5013M18.3333 17.5013H1.66667" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
},
{
category: 'Culture',
title: 'Assess company culture health',
description: 'Review employee satisfaction, engagement levels, and cultural alignment metrics.',
icon: (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 5.83464C7.5 6.752 7.5 7.21068 7.70552 7.54611C7.88497 7.84313 8.15687 8.11503 8.45389 8.29448C8.78932 8.5 9.248 8.5 10.1654 8.5H11.5013C12.4187 8.5 12.8774 8.5 13.2128 8.29448C13.5098 8.11503 13.7817 7.84313 13.9612 7.54611C14.1667 7.21068 14.1667 6.752 14.1667 5.83464V4.16797C14.1667 3.25061 14.1667 2.79193 13.9612 2.4565C13.7817 2.15948 13.5098 1.88758 13.2128 1.70813C12.8774 1.5026 12.4187 1.5026 11.5013 1.5026H10.1654C9.248 1.5026 8.78932 1.5026 8.45389 1.70813C8.15687 1.88758 7.88497 2.15948 7.70552 2.4565C7.5 2.79193 7.5 3.25061 7.5 4.16797V5.83464Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M2.5 14.168C2.5 15.0854 2.5 15.544 2.70552 15.8795C2.88497 16.1765 3.15687 16.4484 3.45389 16.6278C3.78932 16.8333 4.248 16.8333 5.16536 16.8333H6.50131C7.41867 16.8333 7.87735 16.8333 8.21278 16.6278C8.5098 16.4484 8.7817 16.1765 8.96115 15.8795C9.16667 15.544 9.16667 15.0854 9.16667 14.168V12.5013C9.16667 11.5839 9.16667 11.1253 8.96115 10.7898C8.7817 10.4928 8.5098 10.2209 8.21278 10.0415C7.87735 9.83594 7.41867 9.83594 6.50131 9.83594H5.16536C4.248 9.83594 3.78932 9.83594 3.45389 10.0415C3.15687 10.2209 2.88497 10.4928 2.70552 10.7898C2.5 11.1253 2.5 11.5839 2.5 12.5013V14.168Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10.8346 14.168C10.8346 15.0854 10.8346 15.544 11.0401 15.8795C11.2196 16.1765 11.4915 16.4484 11.7885 16.6278C12.1239 16.8333 12.5826 16.8333 13.5 16.8333H14.8359C15.7533 16.8333 16.212 16.8333 16.5474 16.6278C16.8444 16.4484 17.1163 16.1765 17.2958 15.8795C17.5013 15.544 17.5013 15.0854 17.5013 14.168V12.5013C17.5013 11.5839 17.5013 11.1253 17.2958 10.7898C17.1163 10.4928 16.8444 10.2209 16.5474 10.0415C16.212 9.83594 15.7533 9.83594 14.8359 9.83594H13.5C12.5826 9.83594 12.1239 9.83594 11.7885 10.0415C11.4915 10.2209 11.2196 10.4928 11.0401 10.7898C10.8346 11.1253 10.8346 11.5839 10.8346 12.5013V14.168Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
},
{
category: 'Reports',
title: 'Generate executive summary',
description: 'Create comprehensive reports on organizational strengths, risks, and recommendations.',
icon: (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6666 9.16797H6.66659M8.33325 12.5013H6.66659M13.3333 5.83464H6.66659M16.6666 5.66797V14.3346C16.6666 15.7348 16.6666 16.4348 16.3941 16.9696C16.1544 17.44 15.772 17.8225 15.3016 18.0622C14.7668 18.3346 14.0667 18.3346 12.6666 18.3346H7.33325C5.93312 18.3346 5.23306 18.3346 4.69828 18.0622C4.22787 17.8225 3.84542 17.44 3.60574 16.9696C3.33325 16.4348 3.33325 15.7348 3.33325 14.3346V5.66797C3.33325 4.26784 3.33325 3.56777 3.60574 3.03299C3.84542 2.56259 4.22787 2.18014 4.69828 1.94045C5.23306 1.66797 5.93312 1.66797 7.33325 1.66797H12.6666C14.0667 1.66797 14.7668 1.66797 15.3016 1.94045C15.772 2.18014 16.1544 2.56259 16.3941 3.03299C16.6666 3.56777 16.6666 4.26784 16.6666 5.66797Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
},
{
category: 'Analysis',
title: 'Compare department metrics',
description: 'Analyze cross-departmental performance and identify areas for improvement.',
icon: (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0001 1.66797C11.0944 1.66797 12.1781 1.88352 13.1891 2.30231C14.2002 2.7211 15.1188 3.33493 15.8926 4.10875C16.6665 4.88257 17.2803 5.80123 17.6991 6.81228C18.1179 7.82332 18.3334 8.90696 18.3334 10.0013M10.0001 1.66797V10.0013M10.0001 1.66797C5.39771 1.66797 1.66675 5.39893 1.66675 10.0013C1.66675 14.6037 5.39771 18.3346 10.0001 18.3346C14.6025 18.3346 18.3334 14.6037 18.3334 10.0013M10.0001 1.66797C14.6025 1.66797 18.3334 5.39893 18.3334 10.0013M18.3334 10.0013L10.0001 10.0013M18.3334 10.0013C18.3334 11.3164 18.0222 12.6128 17.4251 13.7846C16.8281 14.9563 15.9622 15.9701 14.8983 16.7431L10.0001 10.0013" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
},
{
category: 'Performance',
title: 'Review individual performance',
description: 'Deep dive into specific employee performance data and development opportunities.',
icon: (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0013 12.5C11.3821 12.5 12.5013 11.3807 12.5013 10C12.5013 8.61929 11.3821 7.5 10.0013 7.5C8.62061 7.5 7.50132 8.61929 7.50132 10C7.50132 11.3807 8.62061 12.5 10.0013 12.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10.0013 1.66797C14.6037 1.66797 18.3346 5.39893 18.3346 10.0013C18.3346 14.6037 14.6037 18.3346 10.0013 18.3346C5.39893 18.3346 1.66797 14.6037 1.66797 10.0013C1.66797 5.39893 5.39893 1.66797 10.0013 1.66797Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
},
{
category: 'Culture',
title: 'Identify team dynamics',
description: 'Understand collaboration patterns, communication effectiveness, and team cohesion.',
icon: (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.168 5.83464C14.168 7.67561 12.675 9.16797 10.8346 9.16797C8.99367 9.16797 7.50131 7.67561 7.50131 5.83464C7.50131 3.99367 8.99367 2.5013 10.8346 2.5013C12.675 2.5013 14.168 3.99367 14.168 5.83464Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10.8346 11.668C7.52292 11.668 4.83594 14.3549 4.83594 17.6666H16.8346C16.8346 14.3549 14.1477 11.668 10.8346 11.668Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.83464 9.16797C5.83464 10.5488 4.71536 11.668 3.33464 11.668C1.95393 11.668 0.834635 10.5488 0.834635 9.16797C0.834635 7.78725 1.95393 6.66797 3.33464 6.66797C4.71536 6.66797 5.83464 7.78725 5.83464 9.16797Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M3.33594 13.3346C1.49497 13.3346 0.00260794 14.827 0.00260794 16.668H6.66927C6.66927 15.7686 6.35594 14.9346 5.83594 14.2513" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
}
];
const filteredSuggestions = activeCategory === 'All'
? suggestions
: suggestions.filter(s => s.category === activeCategory);
const handleSuggestionClick = (suggestion: any) => {
// Handle suggestion click - could pass this up to parent component
console.log('Clicked suggestion:', suggestion.title);
};
return (
<div className="flex flex-col items-center justify-center min-h-[60vh] px-4">
{/* Welcome Message */}
<div className="text-center mb-8 max-w-2xl">
<h2 className="text-2xl font-semibold text-[var(--Neutrals-NeutralSlate950)] mb-3">
Welcome to Auditly Chat
</h2>
<p className="text-[var(--Neutrals-NeutralSlate600)] text-lg leading-relaxed">
Ask me anything about your team's performance, company culture, or organizational insights.
I can analyze employee data, generate reports, and provide actionable recommendations.
</p>
</div>
{/* Category Tabs */}
<div className="flex flex-wrap gap-2 mb-6">
{categories.map((category) => (
<CategoryTab
key={category}
label={category}
isActive={activeCategory === category}
onClick={() => setActiveCategory(category)}
/>
))}
</div>
{/* Suggestion Cards Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-6xl w-full">
{filteredSuggestions.map((suggestion, index) => (
<SuggestionCard
key={index}
category={suggestion.category}
title={suggestion.title}
description={suggestion.description}
icon={suggestion.icon}
onClick={() => handleSuggestionClick(suggestion)}
/>
))}
</div>
{/* Additional Help Text */}
<div className="mt-8 text-center text-sm text-[var(--Neutrals-NeutralSlate500)] max-w-xl">
<p>
You can also upload files, mention specific employees using @, or ask custom questions about your organization.
I'll provide insights based on your team's data and industry best practices.
</p>
</div>
</div>
);
};
export default ChatEmptyState;

159
src/components/chat/ChatLayout.tsx
View File

@@ -1,159 +0,0 @@
import React, { useState, useEffect, useRef } from 'react';
import { useOrg } from '../../contexts/OrgContext';
import { Employee } from '../../types';
import MessageThread from './MessageThread';
import FileUploadInput from './FileUploadInput';
interface Message {
id: string;
text: string;
isUser: boolean;
timestamp: number;
files?: string[];
}
interface ChatLayoutProps {
children?: React.ReactNode;
}
const ChatLayout: React.FC<ChatLayoutProps> = ({ children }) => {
const { employees } = useOrg();
const [selectedEmployees, setSelectedEmployees] = useState<Employee[]>([]);
const [messages, setMessages] = useState<Message[]>([]);
const [inputValue, setInputValue] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};
useEffect(() => {
scrollToBottom();
}, [messages]);
const handleSendMessage = async () => {
if (!inputValue.trim() && uploadedFiles.length === 0) return;
const userMessage: Message = {
id: Date.now().toString(),
text: inputValue,
isUser: true,
timestamp: Date.now(),
files: uploadedFiles.length > 0 ? [...uploadedFiles] : undefined
};
setMessages(prev => [...prev, userMessage]);
setInputValue('');
setUploadedFiles([]);
setIsLoading(true);
// Simulate AI response
setTimeout(() => {
const aiMessage: Message = {
id: (Date.now() + 1).toString(),
text: "I understand you're asking about the employee data. Based on the information provided, I can help analyze the performance metrics and provide insights.\n\nHere are some key findings from your team's data:\n\n• **Performance Trends**: Overall team productivity has increased by 15% this quarter\n• **Cultural Health**: Employee satisfaction scores are above industry average\n• **Areas for Growth**: Communication and cross-team collaboration could be improved\n\nWould you like me to dive deeper into any of these areas?",
isUser: false,
timestamp: Date.now()
};
setMessages(prev => [...prev, aiMessage]);
setIsLoading(false);
}, 2000);
};
const handleKeyPress = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSendMessage();
}
};
const handleRemoveFile = (index: number) => {
setUploadedFiles(prev => prev.filter((_, i) => i !== index));
};
const handleFilesSelected = (files: File[]) => {
// For demo purposes, we'll just add the file names
// In a real implementation, you'd upload the files and get URLs back
const fileNames = files.map(file => file.name);
setUploadedFiles(prev => [...prev, ...fileNames]);
};
const hasMessages = messages.length > 0;
return (
<div className="w-full h-full flex flex-col overflow-hidden">
{/* Header with Employee Selection */}
<div className="px-6 py-4 bg-[var(--Neutrals-NeutralSlate0)] border-b border-[var(--Neutrals-NeutralSlate200)] flex justify-between items-center">
<div className="flex items-center gap-3">
<h1 className="text-xl font-semibold text-[var(--Neutrals-NeutralSlate950)]">Chat</h1>
{selectedEmployees.length > 0 && (
<div className="flex items-center gap-2">
<span className="text-sm text-[var(--Neutrals-NeutralSlate500)]">Analyzing:</span>
<div className="flex items-center gap-1">
{selectedEmployees.slice(0, 3).map((emp, index) => (
<div key={emp.id} className="px-2 py-1 bg-[var(--Brand-Orange)]/10 rounded-full text-xs text-[var(--Brand-Orange)]">
{emp.name}
</div>
))}
{selectedEmployees.length > 3 && (
<div className="px-2 py-1 bg-[var(--Neutrals-NeutralSlate100)] rounded-full text-xs text-[var(--Neutrals-NeutralSlate600)]">
+{selectedEmployees.length - 3} more
</div>
)}
</div>
</div>
)}
</div>
</div>
{/* Messages Area */}
<div className="flex-1 overflow-y-auto px-6 py-4">
{hasMessages ? (
<div className="max-w-4xl mx-auto">
<MessageThread
messages={messages}
isLoading={isLoading}
/>
<div ref={messagesEndRef} />
</div>
) : (
children
)}
</div>
{/* Input Area */}
<div className="px-6 py-4 bg-[var(--Neutrals-NeutralSlate0)] border-t border-[var(--Neutrals-NeutralSlate200)]">
<div className="max-w-4xl mx-auto">
<div className="flex items-end gap-3">
<FileUploadInput
value={inputValue}
onChange={setInputValue}
onKeyDown={handleKeyPress}
placeholder="Ask about your team's performance, culture, or any insights..."
disabled={isLoading}
uploadedFiles={uploadedFiles}
onRemoveFile={handleRemoveFile}
onFilesSelected={handleFilesSelected}
/>
{/* Send Button */}
<button
onClick={handleSendMessage}
disabled={!inputValue.trim() && uploadedFiles.length === 0}
className="px-4 py-3 bg-[var(--Brand-Orange)] text-white rounded-xl hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex-shrink-0"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.3346 1.66797L9.16797 10.8346M18.3346 1.66797L12.5013 18.3346L9.16797 10.8346M18.3346 1.66797L1.66797 7.5013L9.16797 10.8346" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</div>
</div>
</div>
</div>
);
};
export default ChatLayout;

278
src/components/chat/FileUploadInput.tsx
View File

@@ -1,278 +0,0 @@
import React, { useState, useRef, useCallback } from 'react';
interface FileUploadPreviewProps {
files: string[];
onRemoveFile: (index: number) => void;
}
const FileUploadPreview: React.FC<FileUploadPreviewProps> = ({ files, onRemoveFile }) => {
if (files.length === 0) return null;
const getFileIcon = (fileName: string) => {
const extension = fileName.split('.').pop()?.toLowerCase();
switch (extension) {
case 'pdf':
return (
<div className="w-6 h-6 bg-red-500 rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">P</span>
</div>
);
case 'doc':
case 'docx':
return (
<div className="w-6 h-6 bg-blue-500 rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">W</span>
</div>
);
case 'xls':
case 'xlsx':
return (
<div className="w-6 h-6 bg-green-500 rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">E</span>
</div>
);
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
return (
<div className="w-6 h-6 bg-purple-500 rounded flex items-center justify-center">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 9L3.5 6.5L5 8L8.5 4.5L11 7M1 1H11V11H1V1Z" stroke="white" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
);
default:
return (
<div className="w-6 h-6 bg-gray-500 rounded flex items-center justify-center">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 1H2C1.44772 1 1 1.44772 1 2V10C1 10.5523 1.44772 11 2 11H10C10.5523 11 11 10.5523 11 10V5M7 1L11 5M7 1V5H11" stroke="white" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
);
}
};
return (
<div className="mb-3 flex flex-wrap gap-2">
{files.map((file, index) => (
<div
key={index}
className="inline-flex items-center gap-2 px-3 py-2 bg-[var(--Neutrals-NeutralSlate100)] rounded-lg hover:bg-[var(--Neutrals-NeutralSlate200)] transition-colors group"
>
{getFileIcon(file)}
<span className="text-sm text-[var(--Neutrals-NeutralSlate700)] max-w-[150px] truncate">{file}</span>
<button
onClick={() => onRemoveFile(index)}
className="w-5 h-5 text-[var(--Neutrals-NeutralSlate400)] hover:text-red-500 hover:bg-red-50 rounded transition-colors flex items-center justify-center"
title="Remove file"
>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3L3 9M3 3L9 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</div>
))}
</div>
);
};
interface FileUploadDropzoneProps {
onFilesSelected: (files: File[]) => void;
children: React.ReactNode;
accept?: string;
multiple?: boolean;
disabled?: boolean;
}
const FileUploadDropzone: React.FC<FileUploadDropzoneProps> = ({
onFilesSelected,
children,
accept = "*/*",
multiple = true,
disabled = false
}) => {
const [isDragOver, setIsDragOver] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const handleDragOver = useCallback((e: React.DragEvent) => {
e.preventDefault();
if (!disabled) {
setIsDragOver(true);
}
}, [disabled]);
const handleDragLeave = useCallback((e: React.DragEvent) => {
e.preventDefault();
setIsDragOver(false);
}, []);
const handleDrop = useCallback((e: React.DragEvent) => {
e.preventDefault();
setIsDragOver(false);
if (disabled) return;
const files = Array.from(e.dataTransfer.files);
if (files.length > 0) {
onFilesSelected(files);
}
}, [onFilesSelected, disabled]);
const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files || []);
if (files.length > 0) {
onFilesSelected(files);
}
// Reset input value to allow selecting the same file again
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
}, [onFilesSelected]);
const handleClick = () => {
if (!disabled && fileInputRef.current) {
fileInputRef.current.click();
}
};
return (
<div
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
className={`
relative transition-all
${isDragOver ? 'opacity-80' : ''}
${disabled ? 'cursor-not-allowed opacity-50' : ''}
`}
>
<input
ref={fileInputRef}
type="file"
accept={accept}
multiple={multiple}
onChange={handleFileSelect}
className="hidden"
disabled={disabled}
/>
{children}
{/* Drag overlay */}
{isDragOver && (
<div className="absolute inset-0 bg-[var(--Brand-Orange)]/10 border-2 border-dashed border-[var(--Brand-Orange)] rounded-xl flex items-center justify-center">
<div className="text-[var(--Brand-Orange)] font-medium">Drop files here</div>
</div>
)}
</div>
);
};
interface FileUploadInputProps {
value: string;
onChange: (value: string) => void;
onKeyDown?: (e: React.KeyboardEvent) => void;
placeholder?: string;
disabled?: boolean;
uploadedFiles: string[];
onRemoveFile: (index: number) => void;
onFilesSelected: (files: File[]) => void;
}
const FileUploadInput: React.FC<FileUploadInputProps> = ({
value,
onChange,
onKeyDown,
placeholder = "Ask about your team's performance, culture, or any insights...",
disabled = false,
uploadedFiles,
onRemoveFile,
onFilesSelected
}) => {
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFilesSelected = (files: File[]) => {
// For demo purposes, we'll just add the file names
// In a real implementation, you'd upload the files and get URLs back
const fileNames = files.map(file => file.name);
onFilesSelected(files);
};
const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files || []);
if (files.length > 0) {
handleFilesSelected(files);
}
// Reset input value to allow selecting the same file again
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
const handleUploadClick = () => {
if (!disabled && fileInputRef.current) {
fileInputRef.current.click();
}
};
return (
<div className="w-full">
{/* File Upload Preview */}
<FileUploadPreview files={uploadedFiles} onRemoveFile={onRemoveFile} />
{/* Hidden File Input */}
<input
ref={fileInputRef}
type="file"
accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.jpg,.jpeg,.png,.gif"
multiple
onChange={handleFileInputChange}
className="hidden"
disabled={disabled}
/>
{/* Input Field with File Upload */}
<FileUploadDropzone
onFilesSelected={handleFilesSelected}
disabled={disabled}
accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.jpg,.jpeg,.png,.gif"
>
<div className="relative flex items-end gap-3">
<div className="flex-1 relative">
<textarea
value={value}
onChange={(e) => onChange(e.target.value)}
onKeyDown={onKeyDown}
onClick={(e) => e.stopPropagation()}
placeholder={placeholder}
disabled={disabled}
className="w-full min-h-[44px] max-h-32 px-4 py-3 pr-12 border border-[var(--Neutrals-NeutralSlate200)] rounded-xl resize-none focus:outline-none focus:border-[var(--Brand-Orange)] focus:ring-1 focus:ring-[var(--Brand-Orange)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors bg-[var(--Neutrals-NeutralSlate0)] text-[var(--Neutrals-NeutralSlate950)]"
rows={1}
/>
{/* File Upload Button */}
<button
type="button"
disabled={disabled}
onClick={(e) => {
e.stopPropagation();
handleUploadClick();
}}
className="absolute right-3 top-3 w-6 h-6 text-[var(--Neutrals-NeutralSlate400)] hover:text-[var(--Brand-Orange)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
title="Upload files"
>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15M17 8L12 3M12 3L7 8M12 3V15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</div>
</div>
</FileUploadDropzone>
</div>
);
};
export default FileUploadInput;
export { FileUploadPreview, FileUploadDropzone };

118
src/components/chat/MessageThread.tsx
View File

@@ -1,118 +0,0 @@
import React from 'react';
interface Message {
id: string;
text: string;
isUser: boolean;
timestamp: number;
files?: string[];
}
interface MessageBubbleProps {
message: Message;
}
const MessageBubble: React.FC<MessageBubbleProps> = ({ message }) => {
const formatTime = (timestamp: number) => {
return new Date(timestamp).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit'
});
};
if (message.isUser) {
return (
<div className="flex justify-end mb-4">
<div className="max-w-[70%] flex flex-col items-end">
<div className="bg-[var(--Brand-Orange)] text-white px-4 py-3 rounded-2xl rounded-br-md">
{message.files && message.files.length > 0 && (
<div className="mb-2 flex flex-wrap gap-2">
{message.files.map((file, index) => (
<div key={index} className="px-2 py-1 bg-white/20 rounded text-xs">
📎 {file}
</div>
))}
</div>
)}
<div className="text-sm leading-relaxed">{message.text}</div>
</div>
<div className="text-xs text-[var(--Neutrals-NeutralSlate400)] mt-1">
{formatTime(message.timestamp)}
</div>
</div>
</div>
);
}
return (
<div className="flex justify-start mb-4">
<div className="max-w-[85%] flex items-start gap-3">
{/* AI Avatar */}
<div className="w-8 h-8 bg-gradient-to-br from-[var(--Brand-Orange)] to-orange-600 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 2C8.73438 2 9.375 2.64062 9.375 3.375V4.5C9.375 5.23438 8.73438 5.875 8 5.875C7.26562 5.875 6.625 5.23438 6.625 4.5V3.375C6.625 2.64062 7.26562 2 8 2ZM8 10.125C8.73438 10.125 9.375 10.7656 9.375 11.5V12.625C9.375 13.3594 8.73438 14 8 14C7.26562 14 6.625 13.3594 6.625 12.625V11.5C6.625 10.7656 7.26562 10.125 8 10.125ZM12.625 6.625C13.3594 6.625 14 7.26562 14 8C14 8.73438 13.3594 9.375 12.625 9.375H11.5C10.7656 9.375 10.125 8.73438 10.125 8C10.125 7.26562 10.7656 6.625 11.5 6.625H12.625ZM5.875 8C5.875 8.73438 5.23438 9.375 4.5 9.375H3.375C2.64062 9.375 2 8.73438 2 8C2 7.26562 2.64062 6.625 3.375 6.625H4.5C5.23438 6.625 5.875 7.26562 5.875 8Z" fill="white" />
</svg>
</div>
<div className="flex flex-col">
<div className="bg-[var(--Neutrals-NeutralSlate100)] text-[var(--Neutrals-NeutralSlate950)] px-4 py-3 rounded-2xl rounded-bl-md">
<div className="text-sm leading-relaxed whitespace-pre-wrap">{message.text}</div>
</div>
<div className="text-xs text-[var(--Neutrals-NeutralSlate400)] mt-1">
AI • {formatTime(message.timestamp)}
</div>
</div>
</div>
</div>
);
};
interface LoadingIndicatorProps {
className?: string;
}
const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ className = '' }) => (
<div className={`flex justify-start mb-4 ${className}`}>
<div className="flex items-start gap-3">
{/* AI Avatar */}
<div className="w-8 h-8 bg-gradient-to-br from-[var(--Brand-Orange)] to-orange-600 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 2C8.73438 2 9.375 2.64062 9.375 3.375V4.5C9.375 5.23438 8.73438 5.875 8 5.875C7.26562 5.875 6.625 5.23438 6.625 4.5V3.375C6.625 2.64062 7.26562 2 8 2ZM8 10.125C8.73438 10.125 9.375 10.7656 9.375 11.5V12.625C9.375 13.3594 8.73438 14 8 14C7.26562 14 6.625 13.3594 6.625 12.625V11.5C6.625 10.7656 7.26562 10.125 8 10.125ZM12.625 6.625C13.3594 6.625 14 7.26562 14 8C14 8.73438 13.3594 9.375 12.625 9.375H11.5C10.7656 9.375 10.125 8.73438 10.125 8C10.125 7.26562 10.7656 6.625 11.5 6.625H12.625ZM5.875 8C5.875 8.73438 5.23438 9.375 4.5 9.375H3.375C2.64062 9.375 2 8.73438 2 8C2 7.26562 2.64062 6.625 3.375 6.625H4.5C5.23438 6.625 5.875 7.26562 5.875 8Z" fill="white" />
</svg>
</div>
<div className="bg-[var(--Neutrals-NeutralSlate100)] px-4 py-3 rounded-2xl rounded-bl-md">
<div className="flex items-center gap-2">
<div className="w-2 h-2 bg-[var(--Neutrals-NeutralSlate400)] rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
<div className="w-2 h-2 bg-[var(--Neutrals-NeutralSlate400)] rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
<div className="w-2 h-2 bg-[var(--Neutrals-NeutralSlate400)] rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
</div>
</div>
</div>
</div>
);
interface MessageThreadProps {
messages: Message[];
isLoading?: boolean;
className?: string;
}
const MessageThread: React.FC<MessageThreadProps> = ({
messages,
isLoading = false,
className = ''
}) => {
return (
<div className={`flex flex-col ${className}`}>
{messages.map((message) => (
<MessageBubble key={message.id} message={message} />
))}
{isLoading && <LoadingIndicator />}
</div>
);
};
export default MessageThread;
export { MessageBubble, LoadingIndicator };

5
src/components/chat/index.ts
View File

@@ -1,5 +0,0 @@
export { default as ChatSidebar } from './ChatSidebar';
export { default as ChatLayout } from './ChatLayout';
export { default as ChatEmptyState } from './ChatEmptyState';
export { default as MessageThread } from './MessageThread';
export { default as FileUploadInput } from './FileUploadInput';

2
src/components/figma/FigmaInput.tsx
View File

@@ -52,7 +52,7 @@ export const FigmaInput: React.FC<FigmaInputProps> = ({
value={value}
onChange={onChange}
placeholder={placeholder}
className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight bg-transparent border-none outline-none placeholder:text-Neutrals-NeutralSlate500"
className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight bg-transparent border-none outline-none placeholder:text-[--Neutrals-NeutralSlate500]"
/>
</div>
</div>

42
src/components/figma/FigmaQuestion.tsx
View File

@@ -35,11 +35,11 @@ export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
{questionNumber}
</div>
<div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-xl font-semibold font-['Inter'] leading-loose">
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-xl font-semibold font-['Inter'] leading-loose">
{title}
</div>
{description && (
<div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-sm font-normal font-['Inter'] leading-tight">
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight">
{description}
</div>
)}
@@ -75,7 +75,7 @@ export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
value={answer}
onChange={(e) => onAnswerChange?.(e.target.value)}
placeholder="Type your answer...."
className="w-full bg-transparent outline-none resize-none text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 min-h-[100px]"
className="w-full bg-transparent outline-none resize-none text-[--Neutrals-NeutralSlate950] text-base font-normal font-['Inter'] leading-normal placeholder:text-[--Neutrals-NeutralSlate950] min-h-[100px]"
/>
</div>
</div>
@@ -86,7 +86,7 @@ export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
{onBack && (
<button
onClick={onBack}
className="px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200 transition-colors"
className="px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100] transition-colors"
>
<div data-svg-wrapper className="relative">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -94,7 +94,7 @@ export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
</svg>
</div>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
{backLabel}
</div>
</div>
@@ -128,7 +128,7 @@ export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
// Progress Bar Component
export const FigmaProgressBar: React.FC<{ currentStep: number; totalSteps: number }> = ({ currentStep, totalSteps }) => {
return (
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
{Array.from({ length: totalSteps }, (_, index) => {
const isActive = index < currentStep;
const isFirst = index === 0;
@@ -154,12 +154,12 @@ export const FigmaRatingScale: React.FC<{
scale?: number;
}> = ({ question, leftLabel, rightLabel, value, onChange, scale = 10 }) => {
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-center items-center gap-12">
<div className="flex flex-col justify-center items-center gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">{question}</div>
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">{question}</div>
<div className="inline-flex justify-center items-center gap-3">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">{leftLabel}</div>
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">{leftLabel}</div>
{Array.from({ length: scale }, (_, index) => {
const number = index + 1;
const isSelected = value === number;
@@ -167,7 +167,7 @@ export const FigmaRatingScale: React.FC<{
<div
key={number}
onClick={() => onChange(number)}
className={`w-12 h-12 relative rounded-[576.35px] overflow-hidden cursor-pointer transition-colors ${isSelected ? 'bg-Brand-Orange' : 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'
className={`w-12 h-12 relative rounded-[576.35px] overflow-hidden cursor-pointer transition-colors ${isSelected ? 'bg-Brand-Orange' : 'bg-[--Neutrals-NeutralSlate100] hover:bg-Neutrals-NeutralSlate200'
}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-xl font-medium font-['Inter'] leading-7 ${isSelected ? 'text-white' : 'text-Neutrals-NeutralSlate950'
@@ -177,7 +177,7 @@ export const FigmaRatingScale: React.FC<{
</div>
);
})}
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">{rightLabel}</div>
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">{rightLabel}</div>
</div>
</div>
</div>
@@ -193,15 +193,15 @@ export const FigmaTextArea: React.FC<{
placeholder?: string;
}> = ({ question, value, onChange, placeholder = "Type your answer...." }) => {
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">{question}</div>
<div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">{question}</div>
<div className="self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate100] rounded-xl inline-flex justify-start items-start gap-2.5">
<textarea
value={value}
onChange={(e) => onChange(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-base font-normal font-['Inter'] leading-normal placeholder:text-[--Neutrals-NeutralSlate950] outline-none resize-none"
placeholder={placeholder}
rows={6}
/>
@@ -229,8 +229,8 @@ export const FigmaNavigationButtons: React.FC<{
<>
{/* Progress indicator */}
{currentStep && totalSteps && (
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">{currentStep} of {totalSteps}</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">{currentStep} of {totalSteps}</div>
</div>
)}
@@ -238,9 +238,9 @@ export const FigmaNavigationButtons: React.FC<{
{onSkip && (
<div
onClick={onSkip}
className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-Neutrals-NeutralSlate200"
className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-[--Neutrals-NeutralSlate100]"
>
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
</div>
)}
@@ -256,10 +256,10 @@ export const FigmaNavigationButtons: React.FC<{
{onBack && (
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200"
className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100]"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
)}