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

update, not done

Browse Source
This commit is contained in:
Ra
2025-08-25 10:46:46 -07:00
parent df7020cdd4
commit daa89b6cbf
22 changed files with 1526 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.css
View File

@@ -79,6 +79,8 @@
--button-bg-primary : #5E48FC; --button-bg-primary : #5E48FC;
--button-border-primary: #7B64FF; --button-border-primary: #7B64FF;
--white: #FFFFFF;
} }
.dark { .dark {

4
index.tsx
View File

@@ -11,7 +11,5 @@ if (!rootElement) {
const root = ReactDOM.createRoot(rootElement); const root = ReactDOM.createRoot(rootElement);
root.render( root.render(
<React.StrictMode> <App />
<App />
</React.StrictMode>
); );

6
src/App.tsx
View File

@@ -8,6 +8,7 @@ import { Layout } from './components/UiKit';
import CompanyWiki from './pages/CompanyWiki'; import CompanyWiki from './pages/CompanyWiki';
// import Report from '../deprecated/pages/EmployeeData'; // import Report from '../deprecated/pages/EmployeeData';
import Reports from './pages/Reports'; import Reports from './pages/Reports';
import Submissions from './pages/Submissions';
import Chat from './pages/Chat'; import Chat from './pages/Chat';
import HelpNew from './pages/HelpNew'; import HelpNew from './pages/HelpNew';
import SettingsNew from './pages/SettingsNew'; import SettingsNew from './pages/SettingsNew';
@@ -257,10 +258,7 @@ function App() {
> >
<Route path="/" element={<Navigate to="/reports" replace />} /> <Route path="/" element={<Navigate to="/reports" replace />} />
<Route path="/company-wiki" element={<CompanyWiki />} /> <Route path="/company-wiki" element={<CompanyWiki />} />
{/* <Route path="/submissions" element={<Submissions />} />
This is the old reports page
<Route path="/submissions" element={<Report mode="submissions" />} />
*/}
<Route path="/reports" element={<Reports />} /> <Route path="/reports" element={<Reports />} />
<Route path="/help" element={<HelpAndSettings />} /> <Route path="/help" element={<HelpAndSettings />} />
<Route path="/settings" element={<HelpAndSettings />} /> <Route path="/settings" element={<HelpAndSettings />} />

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

@@ -70,9 +70,9 @@ export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps>
<div <div
key={index} key={index}
onClick={() => onSectionClick?.(sectionNumber)} 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-NeutralSlate700] 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-[--Neutrals-NeutralSlate50] dark:hover:bg-[--Neutrals-NeutralSlate700] ${isActive ? 'bg-[--Neutrals-NeutralSlate100] 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={`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-[--Neutrals-NeutralSlate100] 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-NeutralSlate0]'}`}> <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-NeutralSlate0]'}`}>
{sectionNumber} {sectionNumber}
</div> </div>
@@ -116,7 +116,7 @@ export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps>
))} ))}
{/* Additional Questions */} {/* Additional Questions */}
<div className="self-stretch pl-3 pr-6 pt-3 pb-6 bg-Text-Gray-100 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 pl-3 pr-6 pt-3 pb-6 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 inline-flex justify-center items-center gap-3"> <div className="self-stretch inline-flex justify-center items-center gap-3">
<div className="flex-1 justify-start text-Text-Gray-600 text-sm font-medium font-['Inter'] leading-tight">What is the mission of your company?</div> <div className="flex-1 justify-start text-Text-Gray-600 text-sm font-medium font-['Inter'] leading-tight">What is the mission of your company?</div>
</div> </div>

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

@@ -20,50 +20,50 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
<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>
<div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5"> <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="self-stretch p-2 bg-[--Neutrals-NeutralSlate100] 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="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>
<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>
<div className="self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden"> <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"> <div className="h-5 p-0.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">2</div> <div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">2</div>
</div> </div>
<div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Leadership & Organizational Structure</div> <div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Leadership & Organizational Structure</div>
</div> </div>
<div className="self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden"> <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"> <div className="h-5 p-0.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">3</div> <div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">3</div>
</div> </div>
<div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Operations & Execution</div> <div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Operations & Execution</div>
</div> </div>
<div className="self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden"> <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"> <div className="h-5 p-0.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">4</div> <div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">4</div>
</div> </div>
<div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Culture & Team Health</div> <div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Culture & Team Health</div>
</div> </div>
<div className="self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden"> <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"> <div className="h-5 p-0.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">5</div> <div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">5</div>
</div> </div>
<div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Sales, Marketing & Growth</div> <div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Sales, Marketing & Growth</div>
</div> </div>
<div className="self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden"> <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"> <div className="h-5 p-0.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">6</div> <div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">6</div>
</div> </div>
<div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Financial Health & Metrics</div> <div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Financial Health & Metrics</div>
</div> </div>
<div className="self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden"> <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"> <div className="h-5 p-0.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">7</div> <div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">7</div>
</div> </div>
<div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Innovation & Product/Service Strategy</div> <div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Innovation & Product/Service Strategy</div>
</div> </div>
<div className="self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden"> <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"> <div className="h-5 p-0.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">8</div> <div className="w-4 text-center justify-start text-Text-Dark-950 text-xs font-normal font-['Inter'] leading-none">8</div>
</div> </div>
<div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Personal Leadership & Risk</div> <div className="flex-1 justify-start text-Text-Gray-500 text-xs font-medium font-['Inter'] leading-none">Personal Leadership & Risk</div>

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

@@ -39,9 +39,9 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
return ( return (
<div <div
key={index} 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-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate800] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'hover:bg-[--Neutrals-NeutralSlate50] 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={`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-[--Neutrals-NeutralSlate100] 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-NeutralSlate0]'}`}> <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-NeutralSlate0]'}`}>
{sectionNumber} {sectionNumber}
</div> </div>
@@ -65,7 +65,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
<div className="self-stretch flex-1 p-5 flex justify-center items-center"> <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"> <div className="w-[440px] flex flex-col justify-center items-center gap-8">
{/* Progress Illustration Placeholder */} {/* 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-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate700] rounded-2xl flex items-center justify-center">
<div className="text-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"> <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"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="text-white">
@@ -87,7 +87,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
</div> </div>
{/* Progress Bar */} {/* 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-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate700] rounded-full overflow-hidden">
<div <div
className="h-full bg-[--Brand-Orange] rounded-full transition-all duration-300" className="h-full bg-[--Brand-Orange] rounded-full transition-all duration-300"
style={{ width: `${progress}%` }} style={{ width: `${progress}%` }}

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

@@ -35,7 +35,7 @@ export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
</div> </div>
<button <button
onClick={onClose} 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-[--Neutrals-NeutralSlate100] dark:hover:bg-[--Neutrals-NeutralSlate700] rounded"
> >
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"> <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" /> <path d="M13 1L1 13M1 1L13 13" stroke="#666D80" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -73,7 +73,7 @@ export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
<div className="flex justify-start items-start gap-3"> <div className="flex justify-start items-start gap-3">
<button <button
onClick={onClose} onClick={onClose}
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]" 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-[--Neutrals-NeutralSlate50] dark:hover:bg-[--Neutrals-NeutralSlate0]"
> >
Cancel Cancel
</button> </button>

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

@@ -70,7 +70,7 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
</div> </div>
<button <button
onClick={onClose} 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-[--Neutrals-NeutralSlate100] dark:hover:bg-[--Neutrals-NeutralSlate700] rounded"
> >
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"> <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" /> <path d="M13 1L1 13M1 1L13 13" stroke="#666D80" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -108,7 +108,7 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
<button <button
key={employee.id} key={employee.id}
onClick={() => handleEmployeeSelect(employee)} onClick={() => handleEmployeeSelect(employee)}
className="w-full px-3 py-2 text-left hover:bg-Text-Gray-50 flex items-center gap-3 border-b border-Text-Gray-100 last:border-b-0" className="w-full px-3 py-2 text-left hover:bg-[--Neutrals-NeutralSlate50] flex items-center gap-3 border-b border-Text-Gray-100 last:border-b-0"
> >
<div className="w-8 h-8 bg-[--Brand-Orange] rounded-full flex items-center justify-center text-white text-sm font-medium"> <div className="w-8 h-8 bg-[--Brand-Orange] rounded-full flex items-center justify-center text-white text-sm font-medium">
{employee.name.charAt(0)} {employee.name.charAt(0)}
@@ -159,7 +159,7 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
<div className="flex justify-start items-start gap-3"> <div className="flex justify-start items-start gap-3">
<button <button
onClick={onClose} 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-[--Neutrals-NeutralSlate50]"
> >
Cancel Cancel
</button> </button>

194
src/constants.ts
View File

@@ -128,88 +128,118 @@ export const SAMPLE_COMPANY_REPORT: CompanyReport = {
{ title: 'Lack of Structure', description: 'People are confused about their roles. No one knows who\'s responsible.' }, { title: 'Lack of Structure', description: 'People are confused about their roles. No one knows who\'s responsible.' },
{ title: 'Communication Gaps', description: 'Information doesn\'t flow effectively between departments.' } { title: 'Communication Gaps', description: 'Information doesn\'t flow effectively between departments.' }
], ],
gradingBreakdown: { gradingBreakdown: [
departmentNameShort: 'Campaigns', {
departmentName: 'Campaigns Department', departmentNameShort: 'Campaigns',
lead: 'Sarah Johnson', departmentName: 'Campaigns Department',
support: 'Mike Chen', lead: 'Sarah Johnson',
departmentGrade: 'A', support: 'Mike Chen',
executiveSummary: 'Campaigns team shows exceptional performance with strong collaboration and innovative approaches to client work.', departmentGrade: 'A',
teamScores: [ executiveSummary: 'Campaigns team shows exceptional performance with strong collaboration and innovative approaches to client work.',
{ teamScores: [
employeeName: 'Sarah Johnson', {
grade: 'A+', employeeName: 'Sarah Johnson',
reliability: 9, grade: 'A+',
roleFit: 10, reliability: 9,
scalability: 8, roleFit: 10,
output: 9, scalability: 8,
initiative: 9 output: 9,
}, initiative: 9
{ },
employeeName: 'Mike Chen', {
grade: 'A', employeeName: 'Mike Chen',
reliability: 8, grade: 'A',
roleFit: 9, reliability: 8,
scalability: 7, roleFit: 9,
output: 8, scalability: 7,
initiative: 8 output: 8,
}, initiative: 8
{ },
employeeName: 'Lisa Wong', {
grade: 'B+', employeeName: 'Lisa Wong',
reliability: 7, grade: 'B+',
roleFit: 8, reliability: 7,
scalability: 6, roleFit: 8,
output: 7, scalability: 6,
initiative: 7 output: 7,
}, initiative: 7
{ },
employeeName: 'Alex Rivera', {
grade: 'A', employeeName: 'Alex Rivera',
reliability: 8, grade: 'A',
roleFit: 9, reliability: 8,
scalability: 7, roleFit: 9,
output: 8, scalability: 7,
initiative: 8 output: 8,
}, initiative: 8
{ },
employeeName: 'Jamie Park', {
grade: 'B', employeeName: 'Jamie Park',
reliability: 6, grade: 'B',
roleFit: 7, reliability: 6,
scalability: 6, roleFit: 7,
output: 6, scalability: 6,
initiative: 7 output: 6,
}, initiative: 7
{ },
employeeName: 'Taylor Smith', {
grade: 'A', employeeName: 'Taylor Smith',
reliability: 9, grade: 'A',
roleFit: 9, reliability: 9,
scalability: 8, roleFit: 9,
output: 9, scalability: 8,
initiative: 8 output: 9,
}, initiative: 8
{ },
employeeName: 'Jordan Lee', {
grade: 'B+', employeeName: 'Jordan Lee',
reliability: 7, grade: 'B+',
roleFit: 8, reliability: 7,
scalability: 7, roleFit: 8,
output: 8, scalability: 7,
initiative: 7 output: 8,
}, initiative: 7
{ },
employeeName: 'Casey Johnson', {
grade: 'A+', employeeName: 'Casey Johnson',
reliability: 10, grade: 'A+',
roleFit: 9, reliability: 10,
scalability: 9, roleFit: 9,
output: 10, scalability: 9,
initiative: 9 output: 10,
} initiative: 9
] }
}, ]
},
{
departmentNameShort: 'Social Media',
departmentName: 'Social Media Department',
lead: 'Alex Rivera',
support: 'Taylor Smith',
departmentGrade: 'A-',
executiveSummary: 'Social Media team excels in engagement and content creation, driving significant brand awareness.',
teamScores: [
{
employeeName: 'Alex Rivera',
grade: 'A',
reliability: 9,
roleFit: 9,
scalability: 8,
output: 9,
initiative: 8
},
{
employeeName: 'Taylor Smith',
grade: 'A-',
reliability: 8,
roleFit: 8,
scalability: 7,
output: 8,
initiative: 7
}
]
}
],
operatingPlan: { nextQuarterGoals: [], keyInitiatives: [], resourceNeeds: [], riskMitigation: [] }, operatingPlan: { nextQuarterGoals: [], keyInitiatives: [], resourceNeeds: [], riskMitigation: [] },
personnelChanges: { personnelChanges: {
newHires: [ newHires: [

322
src/data/onboardingSteps.ts
View File

@@ -112,7 +112,7 @@ export const onboardingSteps: OnboardingStep[] = [
sectionPosition: 5, sectionPosition: 5,
totalInSection: 9, totalInSection: 9,
type: 'question', type: 'question',
title: 'What is your company\'s vision for the future?', title: 'What is your 5-year vision for the company?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'vision', field: 'vision',
required: true, required: true,
@@ -125,9 +125,9 @@ export const onboardingSteps: OnboardingStep[] = [
sectionPosition: 6, sectionPosition: 6,
totalInSection: 9, totalInSection: 9,
type: 'question', type: 'question',
title: 'What does success look like for your company?', title: 'What are your company\'s top 3 strategic advantages?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'successDefinition', field: 'strategicAdvantages',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -138,9 +138,9 @@ export const onboardingSteps: OnboardingStep[] = [
sectionPosition: 7, sectionPosition: 7,
totalInSection: 9, totalInSection: 9,
type: 'question', type: 'question',
title: 'What are your core company values?', title: 'What are the biggest vulnerabilities or threats?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'coreValues', field: 'vulnerabilities',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -151,9 +151,9 @@ export const onboardingSteps: OnboardingStep[] = [
sectionPosition: 8, sectionPosition: 8,
totalInSection: 9, totalInSection: 9,
type: 'question', type: 'question',
title: 'What do you want to be known for in your industry?', title: 'If the business were to double in size tomorrow, what would break first?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'industryReputation', field: 'scalabilityChallenges',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -344,9 +344,9 @@ export const onboardingSteps: OnboardingStep[] = [
sectionPosition: 6, sectionPosition: 6,
totalInSection: 7, totalInSection: 7,
type: 'question', type: 'question',
title: 'What recurring problems never seem to get solved?', title: 'What processes feel fragile or inconsistent?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'recurringProblems', field: 'fragileProcesses',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -357,9 +357,9 @@ export const onboardingSteps: OnboardingStep[] = [
sectionPosition: 7, sectionPosition: 7,
totalInSection: 7, totalInSection: 7,
type: 'question', type: 'question',
title: 'What would you fix first if you had unlimited resources?', title: 'What recurring problems never seem to get solved?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'wouldFixFirst', field: 'recurringProblems',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -473,7 +473,7 @@ export const onboardingSteps: OnboardingStep[] = [
section: 5, section: 5,
sectionName: "Sales, Marketing & Growth", sectionName: "Sales, Marketing & Growth",
sectionPosition: 1, sectionPosition: 1,
totalInSection: 9, totalInSection: 8,
type: 'intro', type: 'intro',
title: 'Sales, Marketing & Growth', title: 'Sales, Marketing & Growth',
description: 'Description about the topic and what it means.' description: 'Description about the topic and what it means.'
@@ -483,11 +483,11 @@ export const onboardingSteps: OnboardingStep[] = [
section: 5, section: 5,
sectionName: "Sales, Marketing & Growth", sectionName: "Sales, Marketing & Growth",
sectionPosition: 2, sectionPosition: 2,
totalInSection: 9, totalInSection: 8,
type: 'question', type: 'question',
title: 'How do customers typically find you?', title: 'How consistent is your revenue pipeline?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'customerAcquisition', field: 'revenuePipeline',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -496,11 +496,11 @@ export const onboardingSteps: OnboardingStep[] = [
section: 5, section: 5,
sectionName: "Sales, Marketing & Growth", sectionName: "Sales, Marketing & Growth",
sectionPosition: 3, sectionPosition: 3,
totalInSection: 9, totalInSection: 8,
type: 'question', type: 'question',
title: 'What is your competitive advantage?', title: 'Where do most of your customers come from?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'competitiveAdvantage', field: 'customerAcquisition',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -509,11 +509,11 @@ export const onboardingSteps: OnboardingStep[] = [
section: 5, section: 5,
sectionName: "Sales, Marketing & Growth", sectionName: "Sales, Marketing & Growth",
sectionPosition: 4, sectionPosition: 4,
totalInSection: 9, totalInSection: 8,
type: 'question', type: 'question',
title: 'Where do you lose potential customers?', title: 'What is your customer acquisition cost (CAC)?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'customerLoss', field: 'customerAcquisitionCost',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -522,11 +522,11 @@ export const onboardingSteps: OnboardingStep[] = [
section: 5, section: 5,
sectionName: "Sales, Marketing & Growth", sectionName: "Sales, Marketing & Growth",
sectionPosition: 5, sectionPosition: 5,
totalInSection: 9, totalInSection: 8,
type: 'question', type: 'question',
title: 'What drives customer loyalty and retention?', title: 'What\'s your average customer lifetime value (LTV)?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'customerLoyalty', field: 'customerLifetimeValue',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -535,11 +535,11 @@ export const onboardingSteps: OnboardingStep[] = [
section: 5, section: 5,
sectionName: "Sales, Marketing & Growth", sectionName: "Sales, Marketing & Growth",
sectionPosition: 6, sectionPosition: 6,
totalInSection: 9, totalInSection: 8,
type: 'question', type: 'question',
title: 'What marketing efforts have the best ROI?', title: 'What channels or strategies are underutilized?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'marketingROI', field: 'underutilizedChannels',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -548,11 +548,11 @@ export const onboardingSteps: OnboardingStep[] = [
section: 5, section: 5,
sectionName: "Sales, Marketing & Growth", sectionName: "Sales, Marketing & Growth",
sectionPosition: 7, sectionPosition: 7,
totalInSection: 9, totalInSection: 8,
type: 'question', type: 'question',
title: 'Where are you overspending with low ROI?', title: 'Where are you overspending with low ROI?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'overspending', field: 'overspendingROI',
required: true, required: true,
rows: 6 rows: 6
}, },
@@ -561,252 +561,252 @@ export const onboardingSteps: OnboardingStep[] = [
section: 5, section: 5,
sectionName: "Sales, Marketing & Growth", sectionName: "Sales, Marketing & Growth",
sectionPosition: 8, sectionPosition: 8,
totalInSection: 9, totalInSection: 8,
type: 'question', type: 'question',
title: 'What would accelerate your growth the most?', title: 'What is your current bottleneck in scaling revenue?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'growthAccelerator', field: 'currentBottleneck',
required: true,
rows: 6
},
{
id: 42,
section: 5,
sectionName: "Sales, Marketing & Growth",
sectionPosition: 9,
totalInSection: 9,
type: 'question',
title: 'What markets or opportunities are you not pursuing?',
placeholder: 'Type your answer....',
field: 'untappedOpportunities',
required: true, required: true,
rows: 6 rows: 6
}, },
// Section 6: Innovation & Product/Service Strategy (Steps 43-53) // Section 6: Financial Health & Metrics
{
id: 42,
section: 6,
sectionName: "Financial Health & Metrics",
sectionPosition: 1,
totalInSection: 8,
type: 'intro',
title: 'Financial Health & Metrics',
description: 'Description about the topic and what it means.'
},
{ {
id: 43, id: 43,
section: 6, section: 6,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Financial Health & Metrics",
sectionPosition: 1, sectionPosition: 2,
totalInSection: 11, totalInSection: 8,
type: 'intro', type: 'question',
title: 'Innovation & Product/Service Strategy', title: 'What is your monthly burn or overhead?',
description: 'Description about the topic and what it means.' placeholder: 'Type your answer....',
field: 'monthlyBurnOverhead',
required: true,
rows: 6
}, },
{ {
id: 44, id: 44,
section: 6, section: 6,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Financial Health & Metrics",
sectionPosition: 2, sectionPosition: 3,
totalInSection: 11, totalInSection: 8,
type: 'question', type: 'question',
title: 'What new products or services are you considering?', title: 'What is your current monthly/annual revenue?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'newProducts', field: 'currentRevenue',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 45, id: 45,
section: 6, section: 6,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Financial Health & Metrics",
sectionPosition: 3, sectionPosition: 4,
totalInSection: 11, totalInSection: 8,
type: 'question', type: 'question',
title: 'How do you stay innovative and ahead of trends?', title: 'What is your current net profit margin?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'innovationProcess', field: 'netProfitMargin',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 46, id: 46,
section: 6, section: 6,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Financial Health & Metrics",
sectionPosition: 4, sectionPosition: 5,
totalInSection: 11, totalInSection: 8,
type: 'question', type: 'question',
title: 'What customer problems are you uniquely positioned to solve?', title: 'Are your financials up to date and properly reported?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'uniquePosition', field: 'financialsUpToDate',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 47, id: 47,
section: 6, section: 6,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Financial Health & Metrics",
sectionPosition: 5, sectionPosition: 6,
totalInSection: 11, totalInSection: 8,
type: 'question', type: 'question',
title: 'Where do you see your industry heading?', title: 'What would your team do differently if they had full financial transparency?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'industryDirection', field: 'financialGrowthPlanning',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 48, id: 48,
section: 6, section: 6,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Financial Health & Metrics",
sectionPosition: 6, sectionPosition: 7,
totalInSection: 11, totalInSection: 8,
type: 'question', type: 'question',
title: 'What technology or trends could disrupt your business?', title: 'What does your cash runway look like?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'disruptionThreats', field: 'cashRunway',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 49, id: 49,
section: 6, section: 6,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Financial Health & Metrics",
sectionPosition: 7, sectionPosition: 8,
totalInSection: 11, totalInSection: 8,
type: 'question', type: 'question',
title: 'How do you test and validate new ideas?', title: 'What are you underpricing or undervaluing?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'ideaValidation', field: 'underpricing',
required: true, required: true,
rows: 6 rows: 6
}, },
// Section 7: Innovation & Product/Service Strategy (Steps 43-53)
{ {
id: 50, id: 50,
section: 6, section: 7,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Innovation & Product/Service Strategy",
sectionPosition: 8, sectionPosition: 1,
totalInSection: 11, totalInSection: 6,
type: 'question', type: 'intro',
title: 'What would your ideal product/service portfolio look like?', title: 'Innovation & Product/Service Strategy',
placeholder: 'Type your answer....', description: 'Description about the topic and what it means.'
field: 'idealPortfolio',
required: true,
rows: 6
}, },
{ {
id: 51, id: 51,
section: 6, section: 7,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Innovation & Product/Service Strategy",
sectionPosition: 9, sectionPosition: 2,
totalInSection: 11, totalInSection: 6,
type: 'question', type: 'question',
title: 'How do you balance innovation with operational stability?', title: 'What is your most unique offering?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'innovationBalance', field: 'uniqueOffering',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 52, id: 52,
section: 6, section: 7,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Innovation & Product/Service Strategy",
sectionPosition: 10, sectionPosition: 3,
totalInSection: 11, totalInSection: 6,
type: 'question', type: 'question',
title: 'What partnerships could accelerate your innovation?', title: 'What part of the product/service is outdated or stagnant?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'innovationPartnerships', field: 'productStagnation',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 53, id: 53,
section: 6, section: 7,
sectionName: "Innovation & Product/Service Strategy", sectionName: "Innovation & Product/Service Strategy",
sectionPosition: 11, sectionPosition: 4,
totalInSection: 11, totalInSection: 6,
type: 'question', type: 'question',
title: 'How do you measure innovation success?', title: 'What trends are you tracking in your industry?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'innovationMetrics', field: 'industryTrends',
required: true,
rows: 6
},
{
id: 54,
section: 7,
sectionName: "Innovation & Product/Service Strategy",
sectionPosition: 5,
totalInSection: 6,
type: 'question',
title: 'How does your company stay ahead of innovation?',
placeholder: 'Type your answer....',
field: 'innovationAhead',
required: true,
rows: 6
},
{
id: 55,
section: 7,
sectionName: "Innovation & Product/Service Strategy",
sectionPosition: 6,
totalInSection: 6,
type: 'question',
title: 'What new product/service do you believe could change the game for you?',
placeholder: 'Type your answer....',
field: 'industryDirection',
required: true, required: true,
rows: 6 rows: 6
}, },
// Section 7: Personal Leadership & Risk (Steps 54-63)
// Section 8: Personal Leadership & Risk
{ {
id: 54, id: 54,
section: 7, section: 8,
sectionName: "Personal Leadership & Risk", sectionName: "Personal Leadership & Risk",
sectionPosition: 1, sectionPosition: 1,
totalInSection: 10, totalInSection: 8,
type: 'intro', type: 'intro',
title: 'Personal Leadership & Risk', title: 'Personal Leadership & Risk',
description: 'Description about the topic and what it means.' description: 'Description about the topic and what it means.'
}, },
{ {
id: 55, id: 55,
section: 7, section: 8,
sectionName: "Personal Leadership & Risk", sectionName: "Personal Leadership & Risk",
sectionPosition: 2, sectionPosition: 2,
totalInSection: 10, totalInSection: 8,
type: 'question', type: 'question',
title: 'What keeps you up at night about the business?', title: 'What decisions are you avoiding right now?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'businessWorries', field: 'avoidedDecisions',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 56, id: 56,
section: 7, section: 8,
sectionName: "Personal Leadership & Risk", sectionName: "Personal Leadership & Risk",
sectionPosition: 3, sectionPosition: 3,
totalInSection: 10, totalInSection: 8,
type: 'question', type: 'question',
title: 'What are your biggest blind spots as a leader?', title: 'What\'s been the hardest call you\'ve had to make in the last year?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'leadershipBlindSpots', field: 'hardestCall',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 57, id: 57,
section: 7, section: 8,
sectionName: "Personal Leadership & Risk", sectionName: "Personal Leadership & Risk",
sectionPosition: 4, sectionPosition: 4,
totalInSection: 10, totalInSection: 8,
type: 'question', type: 'question',
title: 'How do you handle stress and pressure?', title: 'What part of the business drains your energy the most?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
field: 'stressManagement', field: 'energyDrain',
required: true, required: true,
rows: 6 rows: 6
}, },
{ {
id: 58, id: 58,
section: 7, section: 8,
sectionName: "Personal Leadership & Risk", sectionName: "Personal Leadership & Risk",
sectionPosition: 5, sectionPosition: 5,
totalInSection: 10, totalInSection: 8,
type: 'question',
title: 'What decisions do you most regret or would do differently?',
placeholder: 'Type your answer....',
field: 'regretfulDecisions',
required: true,
rows: 6
},
{
id: 59,
section: 7,
sectionName: "Personal Leadership & Risk",
sectionPosition: 6,
totalInSection: 10,
type: 'question',
title: 'How do you continue learning and growing as a leader?',
placeholder: 'Type your answer....',
field: 'leadershipGrowth',
required: true,
rows: 6
},
{
id: 60,
section: 7,
sectionName: "Personal Leadership & Risk",
sectionPosition: 7,
totalInSection: 10,
type: 'question', type: 'question',
title: 'Where are you most stretched as a leader?', title: 'Where are you most stretched as a leader?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
@@ -815,11 +815,11 @@ export const onboardingSteps: OnboardingStep[] = [
rows: 6 rows: 6
}, },
{ {
id: 61, id: 59,
section: 7, section: 8,
sectionName: "Personal Leadership & Risk", sectionName: "Personal Leadership & Risk",
sectionPosition: 8, sectionPosition: 6,
totalInSection: 10, totalInSection: 8,
type: 'question', type: 'question',
title: 'If you had to take a 90-day sabbatical, what would collapse?', title: 'If you had to take a 90-day sabbatical, what would collapse?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
@@ -828,11 +828,11 @@ export const onboardingSteps: OnboardingStep[] = [
rows: 6 rows: 6
}, },
{ {
id: 62, id: 60,
section: 7, section: 8,
sectionName: "Personal Leadership & Risk", sectionName: "Personal Leadership & Risk",
sectionPosition: 9, sectionPosition: 7,
totalInSection: 10, totalInSection: 8,
type: 'question', type: 'question',
title: 'What legacy are you trying to build through this company?', title: 'What legacy are you trying to build through this company?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',
@@ -841,11 +841,11 @@ export const onboardingSteps: OnboardingStep[] = [
rows: 6 rows: 6
}, },
{ {
id: 63, id: 61,
section: 7, section: 8,
sectionName: "Personal Leadership & Risk", sectionName: "Personal Leadership & Risk",
sectionPosition: 10, sectionPosition: 8,
totalInSection: 10, totalInSection: 8,
type: 'question', type: 'question',
title: 'What would need to happen in the next 12 months for this year to be a success?', title: 'What would need to happen in the next 12 months for this year to be a success?',
placeholder: 'Type your answer....', placeholder: 'Type your answer....',

2
src/pages/Chat.tsx
View File

@@ -432,7 +432,7 @@ const Chat: React.FC = () => {
<div <div
key={category} key={category}
onClick={() => setSelectedCategory(category)} onClick={() => setSelectedCategory(category)}
className={`px-3 py-1.5 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden cursor-pointer ${selectedCategory === category ? 'bg-white' : '' className={`px-3 py-1.5 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden cursor-pointer ${selectedCategory === category ? 'bg-[--Neutrals-NeutralSlate50]' : ''
}`} }`}
> >
<div className="px-0.5 flex justify-center items-center"> <div className="px-0.5 flex justify-center items-center">

362
src/pages/CompanyWiki.tsx
View File

@@ -1,92 +1,302 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useOrg } from '../contexts/OrgContext'; import { useNavigate } from 'react-router-dom';
import { CompanyReport } from '../types'; import { secureApi } from '../services/secureApi';
import { CompanyWikiManager } from '../components/CompanyWiki'; import { OnboardingData } from '../types';
const CompanyWiki: React.FC = () => { const CompanyWiki: React.FC = () => {
const { org, employees, getFullCompanyReportHistory, generateCompanyWiki } = useOrg(); const navigate = useNavigate();
const [isGenerating, setIsGenerating] = useState(false); const [onboardingData, setOnboardingData] = useState<OnboardingData | null>(null);
const [companyReport, setCompanyReport] = useState<CompanyReport | null>(null); const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [onboardingProgress, setOnboardingProgress] = useState(60); const [activeSection, setActiveSection] = useState(1);
const [onboardingCompleted, setOnboardingCompleted] = useState(false);
const [lastStep, setLastStep] = useState<number | undefined>();
useEffect(() => { useEffect(() => {
(async () => { loadOnboardingData();
try { }, []);
const history = await getFullCompanyReportHistory();
if (history.length) {
setCompanyReport(history[0]);
}
} catch (e) {
console.error('Failed loading company report history', e);
}
})();
}, [getFullCompanyReportHistory]);
// Determine wiki state based on company data const loadOnboardingData = async () => {
const wikiState = companyReport ? 'completed' : 'empty';
// Create Q&A items from company report or org data
const qaItems = companyReport ? [
{
question: "What is the mission of your company?",
answer: org?.mission || "To empower small businesses with AI-driven automation tools that increase efficiency and reduce operational overhead."
},
{
question: "How has your mission evolved in the last 1–3 years?",
answer: org?.evolution || "We shifted from general SaaS tools to vertical-specific solutions, with deeper integrations and onboarding support."
},
{
question: "What is your 5-year vision for the company?",
answer: org?.vision || "To become the leading AI operations platform for SMBs in North America, serving over 100,000 customers."
},
{
question: "What are your company's top 3 strategic advantages?",
answer: org?.advantages || "Fast product iteration enabled by in-house AI capabilities\nDeep customer understanding from vertical specialization\nHigh customer retention due to integrated onboarding"
},
{
question: "What are your biggest vulnerabilities or threats?",
answer: org?.vulnerabilities || "Dependence on a single marketing channel, weak middle management, and rising customer acquisition costs."
}
] : undefined;
// Convert employees to suggested format for invitations
const suggestedEmployees = employees?.map(emp => ({
id: emp.id,
name: emp.name || emp.email,
email: emp.email
})) || [];
const handleCompleteOnboarding = async () => {
setIsGenerating(true);
setError(null);
try { try {
const report = await generateCompanyWiki(); setIsLoading(true);
setCompanyReport(report); const response = await secureApi.getOrgData();
setOnboardingProgress(100);
} catch (e: any) { if (!response.onboardingCompleted) {
console.error(e); navigate(`/onboarding`);
setError('Failed to generate company wiki'); return;
}
if (response.onboardingData) {
setOnboardingData(response?.onboardingData);
setOnboardingCompleted(response.onboardingCompleted);
// setLastStep(response.lastStep);
}
} catch (err: any) {
console.error('Failed to load onboarding data:', err);
setError(err.message || 'Failed to load company wiki data');
} finally { } finally {
setIsGenerating(false); setIsLoading(false);
} }
}; };
return ( const getSectionTitle = (section: number): string => {
<div className="flex-1 self-stretch bg-[--Neutrals-NeutralSlate0] rounded-tr-3xl rounded-br-3xl inline-flex flex-col justify-start items-start"> const titles = {
{error && ( 1: 'Company Overview & Vision',
<div className="self-stretch p-4 bg-red-50 border-l-4 border-red-400 text-red-700 text-sm"> 2: 'Leadership & Organizational Structure',
{error} 3: 'Operations & Execution',
</div> 4: 'Culture & Team Health',
)} 5: 'Sales, Marketing & Growth',
6: 'Innovation & Product/Service Strategy',
7: 'Personal Leadership & Risk'
};
return titles[section as keyof typeof titles] || '';
};
<CompanyWikiManager const getSectionQuestions = (section: number) => {
initialState={wikiState} if (!onboardingData) return [];
onboardingProgress={onboardingProgress}
onCompleteOnboarding={handleCompleteOnboarding} const sectionFields = {
qaItems={qaItems} 1: [
suggestedEmployees={suggestedEmployees} 'companySize',
/> 'mission',
'missionEvolution',
'vision',
'strategicAdvantages',
'vulnerabilities',
'scalabilityChallenges',
'growthLimitations'
],
2: [
'leadershipStructure',
'criticalPeople',
'leadershipGaps',
'delegationOpportunities',
'leadershipDevelopment',
'heldOntoTooLong',
'successionConfidence'
],
3: [
'businessSystems',
'personalDependencies',
'operationalFriction',
'workflowEfficiency',
'fragileProcesses',
'recurringProblems'
],
4: [
'cultureDescription',
'livedValues',
'internalFriction',
'speakUpCulture',
'clearExpectations',
'staffFeedback',
'highPerformerLove'
],
5: [
'revenuePipeline',
'customerAcquisition',
'customerAcquisitionCost',
'customerLifetimeValue',
'underutilizedChannels',
'overspendingROI',
'currentBottleneck'
],
6: [
'monthlyBurnOverhead',
'currentRevenue',
'netProfitMargin',
'financialsUpToDate',
'financialGrowthPlanning',
'cashRunway',
'underpricing'
],
7: [
'uniqueOffering',
'productStagnation',
'industryTrends',
'innovationAhead',
'industryDirection'
],
8: [
'avoidedDecisions',
'hardestCall',
'energyDrain',
'leadershipStretched',
'sabbaticalRisks',
'companyLegacy',
'yearSuccess'
]
};
const fields = sectionFields[section as keyof typeof sectionFields] || [];
return fields.map(field => ({
field,
question: getQuestionText(field),
answer: onboardingData[field] || 'No answer provided'
}));
};
const getQuestionText = (field: string): string => {
const questions = {
companySize: 'What is the size of your company?',
mission: 'What is the mission of your company?',
missionEvolution: 'How has your mission evolved in the last 1–3 years?',
vision: 'What is your company\'s vision for the future?',
strategicAdvantages: 'What does success look like for your company?',
vulnerabilities: 'What are your core company values?',
scalabilityChallenges: 'Describe your current leadership structure.',
growthLimitations: 'Who are the most critical people in the business today?',
leadershipStructure: 'Where are leadership gaps or weak links?',
criticalPeople: 'What decisions are you still involved in that someone else should own?',
leadershipGaps: 'What systems or tools do you rely on to run the business?',
delegationOpportunities: 'Where does the business rely too much on you personally?',
leadershipDevelopment: 'Where is the most operational friction inside the company?',
heldOntoTooLong: 'How efficient is your workflow from sales to delivery?',
successionConfidence: 'How confident are you in your succession plan?',
businessSystems: 'What systems or tools do you rely on to run the business?',
personalDependencies: 'Where does the business rely too much on you personally?',
operationalFriction: 'Where is the most operational friction inside the company?',
workflowEfficiency: 'How efficient is your workflow from sales to delivery?',
fragileProcesses: 'What processes feel fragile or inconsistent?',
recurringProblems: 'What recurring problems never seem to get solved?',
cultureDescription: 'How would you describe your company culture in a few words?',
livedValues: 'What values are truly lived out daily by your team?',
internalFriction: 'Where is there internal friction or misalignment?',
speakUpCulture: 'Do people speak up when things are broken or wrong?',
clearExpectations: 'How do customers typically find you?',
staffFeedback: 'What is your competitive advantage?',
highPerformerLove: 'Where do you lose potential customers?',
revenuePipeline: 'How consistent is your revenue pipeline?',
customerAcquisition: 'Where do most of your customers come from?',
customerAcquisitionCost: 'What is your customer acquisition cost (CAC)?',
customerLifetimeValue: 'What\'s your average customer lifetime value (LTV)?',
underutilizedChannels: 'What channels or strategies are underutilized?',
overspendingROI: 'Where are you overspending with low ROI?',
currentBottleneck: 'What is your current bottleneck in scaling revenue?',
monthlyBurnOverhead: 'What is your monthly burn or overhead?',
currentRevenue: 'What is your current monthly/annual revenue?',
netProfitMargin: 'What is your current net profit margin?',
financialsUpToDate: 'Are your financials up to date and properly reported?',
financialGrowthPlanning: 'What would your team do differently if they had full financial transparency?',
cashRunway: 'What does your cash runway look like?',
underpricing: 'What are you underpricing or undervaluing?',
uniqueOffering: 'What is your most unique offering?',
productStagnation: 'What part of the product/service is outdated or stagnant?',
industryTrends: 'What trends are you tracking in your industry?',
innovationAhead: 'How does your company stay ahead of innovation?',
industryDirection: 'What new product/service do you believe could change the game for you?',
avoidedDecisions: 'What decisions are you avoiding right now?',
hardestCall: 'What\'s been the hardest call you\'ve had to make in the last year?',
energyDrain: 'What part of the business drains your energy the most?',
leadershipStretched: 'Where are you most stretched as a leader?',
sabbaticalRisks: 'If you had to take a 90-day sabbatical, what would collapse?',
companyLegacy: 'What legacy are you trying to build through this company?',
yearSuccess: 'What would need to happen in the next 12 months for this year to be a success?'
};
return questions[field as keyof typeof questions] || field;
};
if (isLoading) {
return (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<div className="animate-spin w-8 h-8 border-2 border-Brand-Orange border-t-transparent rounded-full mx-auto mb-4"></div>
<p className="text-Neutrals-NeutralSlate600">Loading company wiki...</p>
</div>
</div>
);
}
if (error) {
return (
<div className="flex-1 flex items-center justify-center">
<div className="text-center text-red-600">
<p>Error: {error}</p>
<button
onClick={loadOnboardingData}
className="mt-4 px-4 py-2 bg-Brand-Orange text-white rounded-lg"
>
Retry
</button>
</div>
</div>
);
}
if (!onboardingCompleted || !onboardingData) {
return null;
}
return (
<div className="flex h-full self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start">
{/* Left Sidebar - Company Navigation */}
{/* Main Content Area */}
<div className="flex-1 self-stretch bg-[--Neutrals-NeutralSlate0] rounded-tr-3xl rounded-br-3xl inline-flex flex-col justify-start items-start">
<div className="self-stretch flex-1 inline-flex justify-start items-center">
{/* Table of Contents Sidebar */}
<div className="flex-1 self-stretch max-w-64 min-w-64 border-r 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 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">
{[1, 2, 3, 4, 5, 6, 7].map((section, index) => (
<div
key={section}
className={`self-stretch p-2 ${activeSection === section ? 'bg-Main-BG-Gray-100 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'rounded-[10px]'} inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer`}
onClick={() => setActiveSection(section)}
>
<div className={`h-5 p-0.5 ${activeSection === section ? 'bg-Brand-Orange' : 'bg-Text-Gray-100'} rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden`}>
<div className={`w-4 text-center justify-start ${activeSection === section ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950'} text-xs ${activeSection === section ? 'font-medium' : 'font-normal'} font-['Inter'] leading-none`}>{section}</div>
</div>
<div className={`flex-1 justify-start ${activeSection === section ? 'text-Neutrals-NeutralSlate800' : 'text-Text-Gray-500'} text-xs font-medium font-['Inter'] leading-none`}>
{getSectionTitle(section)}
</div>
</div>
))}
</div>
</div>
{/* Questions 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 text-base font-medium font-['Inter'] leading-normal">
{getSectionTitle(activeSection)}
</div>
</div>
<div className="self-stretch px-5 flex flex-col justify-start items-start gap-4">
{getSectionQuestions(activeSection).map((qa, index) => (
<div key={qa.field} 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">
{qa.question}
</div>
</div>
</div>
<div className="self-stretch px-3 py-2 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 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 whitespace-pre-wrap">
{qa.answer}
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div> </div>
); );
}; };

263
src/pages/CompanyWikiNew.tsx Normal file
View File

@@ -0,0 +1,263 @@
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { secureApi } from '../services/secureApi';
interface OnboardingData {
[key: string]: string;
}
const CompanyWiki: React.FC = () => {
const navigate = useNavigate();
const [onboardingData, setOnboardingData] = useState<OnboardingData | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [activeSection, setActiveSection] = useState(1);
const [onboardingCompleted, setOnboardingCompleted] = useState(false);
const [lastStep, setLastStep] = useState<number | undefined>();
useEffect(() => {
loadOnboardingData();
}, []);
const loadOnboardingData = async () => {
try {
setIsLoading(true);
const response = await secureApi.getOnboardingQuestions();
if (!response.completed && response.lastStep) {
navigate(`/onboarding?step=${response.lastStep}`);
return;
}
if (!response.completed) {
navigate('/onboarding');
return;
}
setOnboardingData(response.questions);
setOnboardingCompleted(response.completed);
setLastStep(response.lastStep);
} catch (err: any) {
console.error('Failed to load onboarding data:', err);
setError(err.message || 'Failed to load company wiki data');
} finally {
setIsLoading(false);
}
};
const getSectionTitle = (section: number): string => {
const titles = {
1: 'Company Overview & Vision',
2: 'Leadership & Organizational Structure',
3: 'Operations & Execution',
4: 'Culture & Team Health',
5: 'Sales, Marketing & Growth',
6: 'Innovation & Product/Service Strategy',
7: 'Personal Leadership & Risk'
};
return titles[section as keyof typeof titles] || '';
};
const getSectionQuestions = (section: number) => {
if (!onboardingData) return [];
const sectionFields = {
1: ['mission', 'missionEvolution', 'vision', 'successDefinition', 'coreValues'],
2: ['leadershipStructure', 'criticalPeople', 'leadershipGaps', 'delegationOpportunities'],
3: ['businessSystems', 'personalDependencies', 'operationalFriction', 'workflowEfficiency'],
4: ['cultureDescription', 'livedValues', 'internalFriction', 'speakUpCulture'],
5: ['customerAcquisition', 'competitiveAdvantage', 'customerLoss', 'customerLoyalty'],
6: ['newProducts', 'innovationProcess', 'uniquePosition', 'industryDirection'],
7: ['businessWorries', 'leadershipBlindSpots', 'stressManagement', 'regretfulDecisions']
};
const fields = sectionFields[section as keyof typeof sectionFields] || [];
return fields.map(field => ({
field,
question: getQuestionText(field),
answer: onboardingData[field] || 'No answer provided'
}));
};
const getQuestionText = (field: string): string => {
const questions = {
mission: 'What is the mission of your company?',
missionEvolution: 'How has your mission evolved in the last 1–3 years?',
vision: 'What is your company\'s vision for the future?',
successDefinition: 'What does success look like for your company?',
coreValues: 'What are your core company values?',
leadershipStructure: 'Describe your current leadership structure.',
criticalPeople: 'Who are the most critical people in the business today?',
leadershipGaps: 'Where are leadership gaps or weak links?',
delegationOpportunities: 'What decisions are you still involved in that someone else should own?',
businessSystems: 'What systems or tools do you rely on to run the business?',
personalDependencies: 'Where does the business rely too much on you personally?',
operationalFriction: 'Where is the most operational friction inside the company?',
workflowEfficiency: 'How efficient is your workflow from sales to delivery?',
cultureDescription: 'How would you describe your company culture in a few words?',
livedValues: 'What values are truly lived out daily by your team?',
internalFriction: 'Where is there internal friction or misalignment?',
speakUpCulture: 'Do people speak up when things are broken or wrong?',
customerAcquisition: 'How do customers typically find you?',
competitiveAdvantage: 'What is your competitive advantage?',
customerLoss: 'Where do you lose potential customers?',
customerLoyalty: 'What drives customer loyalty and retention?',
newProducts: 'What new products or services are you considering?',
innovationProcess: 'How do you stay innovative and ahead of trends?',
uniquePosition: 'What customer problems are you uniquely positioned to solve?',
industryDirection: 'Where do you see your industry heading?',
businessWorries: 'What keeps you up at night about the business?',
leadershipBlindSpots: 'What are your biggest blind spots as a leader?',
stressManagement: 'How do you handle stress and pressure?',
regretfulDecisions: 'What decisions do you most regret or would do differently?'
};
return questions[field as keyof typeof questions] || field;
};
if (isLoading) {
return (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<div className="animate-spin w-8 h-8 border-2 border-Brand-Orange border-t-transparent rounded-full mx-auto mb-4"></div>
<p className="text-Neutrals-NeutralSlate600">Loading company wiki...</p>
</div>
</div>
);
}
if (error) {
return (
<div className="flex-1 flex items-center justify-center">
<div className="text-center text-red-600">
<p>Error: {error}</p>
<button
onClick={loadOnboardingData}
className="mt-4 px-4 py-2 bg-Brand-Orange text-white rounded-lg"
>
Retry
</button>
</div>
</div>
);
}
if (!onboardingCompleted || !onboardingData) {
return null;
}
return (
<div className="w-[1440px] h-[810px] p-4 bg-[--Neutrals-NeutralSlate200] inline-flex justify-start items-start overflow-hidden">
<div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
{/* Left Sidebar - Company Navigation */}
<div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
{/* Company Header */}
<div className="self-stretch flex flex-col justify-start items-start gap-5">
<div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
<div className="flex-1 flex justify-start items-center gap-2">
<div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
<div className="w-8 h-8 relative bg-Brand-Orange rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
<div className="w-8 h-8 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
</div>
</div>
<div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">
{onboardingData?.companyName || 'Company Name'}
</div>
</div>
</div>
</div>
{/* Navigation Items */}
<div className="self-stretch flex flex-col justify-start items-start gap-5">
<div className="self-stretch flex flex-col justify-start items-start gap-1.5">
<div className="w-60 px-4 py-2.5 bg-[--Neutrals-NeutralSlate100] rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="justify-start text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Company Wiki</div>
</div>
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Submissions</div>
</div>
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Reports</div>
</div>
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Chat</div>
</div>
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Help</div>
</div>
</div>
</div>
</div>
{/* Bottom Section */}
<div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="flex-1 justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Settings</div>
</div>
</div>
</div>
{/* Main Content Area */}
<div className="flex-1 self-stretch bg-[--Neutrals-NeutralSlate0] rounded-tr-3xl rounded-br-3xl inline-flex flex-col justify-start items-start">
<div className="self-stretch flex-1 inline-flex justify-start items-center">
{/* Table of Contents Sidebar */}
<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>
<div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
{[1, 2, 3, 4, 5, 6, 7].map((section, index) => (
<div
key={section}
className={`self-stretch p-2 ${activeSection === section ? 'bg-Main-BG-Gray-100 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'rounded-[10px]'} inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer`}
onClick={() => setActiveSection(section)}
>
<div className={`h-5 p-0.5 ${activeSection === section ? 'bg-Brand-Orange' : 'bg-Text-Gray-100'} rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden`}>
<div className={`w-4 text-center justify-start ${activeSection === section ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950'} text-xs ${activeSection === section ? 'font-medium' : 'font-normal'} font-['Inter'] leading-none`}>{section}</div>
</div>
<div className={`flex-1 justify-start ${activeSection === section ? 'text-Neutrals-NeutralSlate800' : 'text-Text-Gray-500'} text-xs font-medium font-['Inter'] leading-none`}>
{getSectionTitle(section)}
</div>
</div>
))}
</div>
</div>
{/* Questions 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 text-base font-medium font-['Inter'] leading-normal">
{getSectionTitle(activeSection)}
</div>
</div>
<div className="self-stretch px-5 flex flex-col justify-start items-start gap-4">
{getSectionQuestions(activeSection).map((qa, index) => (
<div key={qa.field} 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">
{qa.question}
</div>
</div>
</div>
<div className="self-stretch px-3 py-2 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 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 whitespace-pre-wrap">
{qa.answer}
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default CompanyWiki;

4
src/pages/HelpNew.tsx
View File

@@ -73,7 +73,7 @@ const HelpNew: React.FC = () => {
{faqItems.map((item, index) => ( {faqItems.map((item, index) => (
<div <div
key={index} key={index}
className="self-stretch p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden" className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"
> >
<div <div
onClick={() => toggleFAQ(index)} onClick={() => toggleFAQ(index)}
@@ -105,7 +105,7 @@ const HelpNew: React.FC = () => {
</div> </div>
))} ))}
</div> </div>
<div className="w-[680px] px-5 py-4 bg-Text-Gray-800 rounded-2xl backdrop-blur-blur inline-flex justify-center items-center gap-12 overflow-hidden"> <div className="w-[680px] px-5 py-4 bg-[--Neutrals-NeutralSlate800] rounded-2xl backdrop-blur-blur inline-flex justify-center items-center gap-12 overflow-hidden">
<div className="flex-1 inline-flex flex-col justify-center items-start gap-2"> <div className="flex-1 inline-flex flex-col justify-center items-start gap-2">
<div className="self-stretch justify-start text-Text-White-00 text-base font-medium font-['Inter'] leading-normal">Still have questions?</div> <div className="self-stretch justify-start text-Text-White-00 text-base font-medium font-['Inter'] leading-normal">Still have questions?</div>
<div className="self-stretch justify-start text-Text-Gray-400 text-sm font-normal font-['Inter'] leading-tight">We are available for 24/7</div> <div className="self-stretch justify-start text-Text-Gray-400 text-sm font-normal font-['Inter'] leading-tight">We are available for 24/7</div>

1
src/pages/Onboarding.tsx
View File

@@ -13,7 +13,6 @@ import {
const Onboarding: React.FC = () => { const Onboarding: React.FC = () => {
const { org, upsertOrg, generateCompanyWiki } = useOrg(); const { org, upsertOrg, generateCompanyWiki } = useOrg();
const { user } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {

649
src/pages/Reports.tsx
View File

@@ -1,10 +1,13 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom';
import { useOrg } from '../contexts/OrgContext'; import { useOrg } from '../contexts/OrgContext';
import { secureApiPOST, secureApi } from '../services/secureApi';
import { CompanyReport, Employee, EmployeeReport } from '../types'; import { CompanyReport, Employee, EmployeeReport } from '../types';
import { SAMPLE_COMPANY_REPORT } from '../constants'; import { SAMPLE_COMPANY_REPORT } from '../constants';
import RadarPerformanceChart from '../components/charts/RadarPerformanceChart'; import RadarPerformanceChart from '../components/charts/RadarPerformanceChart';
const Reports: React.FC = () => { const Reports: React.FC = () => {
const location = useLocation();
const { employees, reports, user, isOwner, getFullCompanyReportHistory, generateEmployeeReport, generateCompanyReport, orgId } = useOrg(); const { employees, reports, user, isOwner, getFullCompanyReportHistory, generateEmployeeReport, generateCompanyReport, orgId } = useOrg();
const [companyReport, setCompanyReport] = useState<CompanyReport | null>(null); const [companyReport, setCompanyReport] = useState<CompanyReport | null>(null);
const [selectedReport, setSelectedReport] = useState<{ report: CompanyReport | EmployeeReport; type: 'company' | 'employee'; employeeName?: string } | null>(null); const [selectedReport, setSelectedReport] = useState<{ report: CompanyReport | EmployeeReport; type: 'company' | 'employee'; employeeName?: string } | null>(null);
@@ -14,6 +17,9 @@ const Reports: React.FC = () => {
const currentUserIsOwner = isOwner(user?.uid || ''); const currentUserIsOwner = isOwner(user?.uid || '');
// Get selected employee ID from navigation state (from Submissions page)
const selectedEmployeeId = location.state?.selectedEmployeeId;
// Load company report on component mount // Load company report on component mount
useEffect(() => { useEffect(() => {
const loadCompanyReport = async () => { const loadCompanyReport = async () => {
@@ -38,6 +44,16 @@ const Reports: React.FC = () => {
loadCompanyReport(); loadCompanyReport();
}, [currentUserIsOwner, getFullCompanyReportHistory]); }, [currentUserIsOwner, getFullCompanyReportHistory]);
// Handle navigation from Submissions page
useEffect(() => {
if (selectedEmployeeId) {
const employee = employees.find(emp => emp.id === selectedEmployeeId);
if (employee) {
handleEmployeeSelect(employee);
}
}
}, [selectedEmployeeId, employees, handleEmployeeSelect]);
// Filter and sort employees // Filter and sort employees
const visibleEmployees = currentUserIsOwner const visibleEmployees = currentUserIsOwner
? employees.filter(emp => ? employees.filter(emp =>
@@ -45,7 +61,7 @@ const Reports: React.FC = () => {
).sort((a, b) => a.name.localeCompare(b.name)) ).sort((a, b) => a.name.localeCompare(b.name))
: employees.filter(emp => emp.id === user?.uid); : employees.filter(emp => emp.id === user?.uid);
const handleEmployeeSelect = (employee: Employee) => { const handleEmployeeSelect = useCallback((employee: Employee) => {
const employeeReport = reports[employee.id]; const employeeReport = reports[employee.id];
if (employeeReport) { if (employeeReport) {
setSelectedReport({ setSelectedReport({
@@ -54,7 +70,7 @@ const Reports: React.FC = () => {
employeeName: employee.name employeeName: employee.name
}); });
} }
}; }, [reports]);
const handleCompanyReportSelect = () => { const handleCompanyReportSelect = () => {
if (companyReport) { if (companyReport) {
@@ -76,237 +92,101 @@ const Reports: React.FC = () => {
}; };
return ( return (
<div className="w-[1440px] h-[4558px] p-4 bg-[--Neutrals-NeutralSlate200] inline-flex justify-start items-start overflow-hidden"> <div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
<div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden"> {/* Middle Section - Employee List */}
<div className="flex-1 self-stretch bg-[--Neutrals-NeutralSlate0] flex justify-start items-center">
{/* Left Sidebar - Navigation */} <div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-start items-start">
<div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden"> <div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
<div className="self-stretch flex flex-col justify-start items-start gap-5"> <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Employees</div>
{/* Company Logo */}
<div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
<div className="flex-1 flex justify-start items-center gap-2">
<div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
<div className="w-8 h-8 relative bg-[--Brand-Orange] rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
<div className="w-8 h-8 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
</div>
</div>
<div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Auditly Company</div>
</div>
</div>
<div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83333 12.5007L9.99999 16.6673L14.1667 12.5007M5.83333 7.50065L9.99999 3.33398L14.1667 7.50065" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</div>
{/* Navigation Items */}
<div className="self-stretch flex flex-col justify-start items-start gap-5">
<div className="self-stretch flex flex-col justify-start items-start gap-1.5">
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 17.4996V11.333C7.5 10.8662 7.5 10.6329 7.59083 10.4546C7.67072 10.2978 7.79821 10.1703 7.95501 10.0904C8.13327 9.99962 8.36662 9.99962 8.83333 9.99962H11.1667C11.6334 9.99962 11.8667 9.99962 12.045 10.0904C12.2018 10.1703 12.3293 10.2978 12.4092 10.4546C12.5 10.6329 12.5 10.8662 12.5 11.333V17.4996M9.18141 2.30297L3.52949 6.6989C3.15168 6.99275 2.96278 7.13968 2.82669 7.32368C2.70614 7.48667 2.61633 7.67029 2.56169 7.86551C2.5 8.0859 2.5 8.32521 2.5 8.80384V14.833C2.5 15.7664 2.5 16.2331 2.68166 16.5896C2.84144 16.9032 3.09641 17.1582 3.41002 17.318C3.76654 17.4996 4.23325 17.4996 5.16667 17.4996H14.8333C15.7668 17.4996 16.2335 17.4996 16.59 17.318C16.9036 17.1582 17.1586 16.9032 17.3183 16.5896C17.5 16.2331 17.5 15.7664 17.5 14.833V8.80384C17.5 8.32521 17.5 8.0859 17.4383 7.86551C17.3837 7.67029 17.2939 7.48667 17.1733 7.32368C17.0372 7.13968 16.8483 6.99275 16.4705 6.69891L10.8186 2.30297C10.5258 2.07526 10.3794 1.9614 10.2178 1.91763C10.0752 1.87902 9.92484 1.87902 9.78221 1.91763C9.62057 1.9614 9.47418 2.07526 9.18141 2.30297Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Company Wiki</div>
</div>
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6667 9.16602H6.66667M8.33333 12.4993H6.66667M13.3333 5.83268H6.66667M16.6667 5.66602V14.3327C16.6667 15.7328 16.6667 16.4329 16.3942 16.9677C16.1545 17.4381 15.772 17.8205 15.3016 18.0602C14.7669 18.3327 14.0668 18.3327 12.6667 18.3327H7.33333C5.9332 18.3327 5.23314 18.3327 4.69836 18.0602C4.22795 17.8205 3.8455 17.4381 3.60582 16.9677C3.33333 16.4329 3.33333 15.7328 3.33333 14.3327V5.66602C3.33333 4.26588 3.33333 3.56582 3.60582 3.03104C3.8455 2.56063 4.22795 2.17818 4.69836 1.9385C5.23314 1.66602 5.9332 1.66602 7.33333 1.66602H12.6667C14.0668 1.66602 14.7669 1.66602 15.3016 1.9385C15.772 2.17818 16.1545 2.56063 16.3942 3.03104C16.6667 3.56582 16.6667 4.26588 16.6667 5.66602Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Submissions</div>
</div>
<div className="w-60 px-4 py-2.5 bg-[--Neutrals-NeutralSlate100] rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_1042_5096)">
<path d="M10 1.66602C11.0943 1.66602 12.178 1.88156 13.189 2.30035C14.2001 2.71914 15.1187 3.33297 15.8926 4.10679C16.6664 4.88062 17.2802 5.79928 17.699 6.81032C18.1178 7.82137 18.3333 8.90501 18.3333 9.99935M10 1.66602V9.99935M10 1.66602C5.39763 1.66602 1.66667 5.39698 1.66667 9.99935C1.66667 14.6017 5.39763 18.3327 10 18.3327C14.6024 18.3327 18.3333 14.6017 18.3333 9.99935M10 1.66602C14.6024 1.66602 18.3333 5.39698 18.3333 9.99935M18.3333 9.99935L10 9.99935M18.3333 9.99935C18.3333 11.3144 18.0221 12.6109 17.4251 13.7826C16.828 14.9544 15.9621 15.9682 14.8982 16.7412L10 9.99935" stroke="var(--Brand-Orange, #3399FF)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</g>
<defs>
<clipPath id="clip0_1042_5096">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Reports</div>
</div>
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.4997 9.58333C17.4997 13.4953 14.3284 16.6667 10.4164 16.6667C9.51904 16.6667 8.66069 16.4998 7.87065 16.1954C7.7262 16.1398 7.65398 16.112 7.59655 16.0987C7.54006 16.0857 7.49917 16.0803 7.44124 16.0781C7.38234 16.0758 7.31772 16.0825 7.18849 16.0958L2.92097 16.537C2.5141 16.579 2.31067 16.6001 2.19067 16.5269C2.08614 16.4631 2.01495 16.3566 1.996 16.2356C1.97425 16.0968 2.07146 15.9168 2.26588 15.557L3.62893 13.034C3.74118 12.8262 3.79731 12.7223 3.82273 12.6225C3.84784 12.5238 3.85391 12.4527 3.84588 12.3512C3.83775 12.2484 3.79266 12.1147 3.7025 11.8472C3.46289 11.1363 3.33302 10.375 3.33302 9.58333C3.33302 5.67132 6.50434 2.5 10.4164 2.5C14.3284 2.5 17.4997 5.67132 17.4997 9.58333Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Chat</div>
</div>
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
<div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_1042_5104)">
<path d="M7.575 7.49935C7.77092 6.94241 8.15763 6.47277 8.66663 6.17363C9.17563 5.87448 9.77408 5.76513 10.356 5.86494C10.9379 5.96475 11.4657 6.26729 11.8459 6.71896C12.2261 7.17063 12.4342 7.74228 12.4333 8.33268C12.4333 9.99935 9.93333 10.8327 9.93333 10.8327M10 14.166H10.0083M18.3333 9.99935C18.3333 14.6017 14.6024 18.3327 10 18.3327C5.39763 18.3327 1.66667 14.6017 1.66667 9.99935C1.66667 5.39698 5.39763 1.66602 10 1.66602C14.6024 1.66602 18.3333 5.39698 18.3333 9.99935Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</g>
<defs>
<clipPath id="clip0_1042_5104">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Help</div>
</div>
</div>
</div>
</div> </div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
{/* Bottom Section - Settings and CTA */} {/* Search */}
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch px-2.5 flex flex-col justify-start items-start gap-2">
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2"> <div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="relative"> <div className="self-stretch px-4 py-3 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <div className="relative">
<g clipPath="url(#clip0_1042_5109)"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12.5013C11.3807 12.5013 12.5 11.382 12.5 10.0013C12.5 8.62059 11.3807 7.5013 10 7.5013C8.61929 7.5013 7.5 8.62059 7.5 10.0013C7.5 11.382 8.61929 12.5013 10 12.5013Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z" stroke="var(--Neutrals-NeutralSlate500, #717680)" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</g> </svg>
</svg>
</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Settings</div>
</div>
{/* CTA Card */}
<div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start overflow-hidden">
<div className="self-stretch h-24 relative">
<div className="w-60 h-32 left-0 top-[-0.50px] absolute bg-gradient-to-b from-black to-black/0" />
</div>
<div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
</div>
<div className="self-stretch px-3 pb-3 flex flex-col justify-start items-start gap-8">
<div className="self-stretch inline-flex justify-start items-start gap-2">
<div className="flex-1 px-3 py-1.5 bg-Button-Secondary rounded-[999px] flex justify-center items-center gap-0.5 overflow-hidden">
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Invite</div>
</div>
<div className="relative">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 3.33203V12.6654M3.33334 7.9987H12.6667" stroke="var(--Neutrals-NeutralSlate950, #0A0D12)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</div>
<div className="flex-1 px-3 py-1.5 bg-[--Brand-Orange] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
<div className="relative">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.97171 12.2442L8.0289 13.1871C6.72716 14.4888 4.61661 14.4888 3.31486 13.1871C2.01311 11.8853 2.01311 9.77476 3.31486 8.47301L4.25767 7.5302M12.7429 8.47301L13.6858 7.5302C14.9875 6.22845 14.9875 4.1179 13.6858 2.81615C12.384 1.51441 10.2735 1.51441 8.97171 2.81615L8.0289 3.75896M6.16697 10.3349L10.8336 5.66826" stroke="var(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Copy</div>
</div>
</div> </div>
<input
type="text"
placeholder="Search"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight outline-none"
/>
</div> </div>
</div> </div>
</div> </div>
{/* Employee List */}
<div className="self-stretch px-3 flex flex-col justify-start items-start">
{/* Company Report Item */}
{currentUserIsOwner && (
<div
className={`self-stretch p-2 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer ${selectedReport?.type === 'company' ? 'bg-[--Neutrals-NeutralSlate100]' : ''
}`}
onClick={handleCompanyReportSelect}
>
<div className="w-7 h-7 p-1 bg-[--Brand-Orange] rounded-[666.67px] flex justify-center items-center">
<div className="text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none">
C
</div>
</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight">Company Report</div>
</div>
)}
{/* Employee Items */}
{visibleEmployees.map((employee) => (
<div
key={employee.id}
className={`self-stretch p-2 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer ${selectedReport?.type === 'employee' && selectedReport?.employeeName === employee.name ? 'bg-[--Neutrals-NeutralSlate100]' : ''
}`}
onClick={() => handleEmployeeSelect(employee)}
>
<div className="w-7 h-7 p-1 bg-[--Neutrals-NeutralSlate100] rounded-[666.67px] flex justify-center items-center">
<div className="text-center justify-start text-[--Neutrals-NeutralSlate500] text-xs font-medium font-['Inter'] leading-none">
{employee.initials}
</div>
</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">
{employee.name}
</div>
</div>
))}
</div>
</div> </div>
</div> </div>
{/* Middle Section - Employee List */} {/* Main Content Area */}
<div className="flex-1 self-stretch bg-[--Neutrals-NeutralSlate0] flex justify-start items-center"> <div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
<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"> {selectedReport ? (
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5"> selectedReport.type === 'company' ? (
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Employees</div> <CompanyReportContent
</div> report={selectedReport.report as CompanyReport}
<div className="self-stretch flex flex-col justify-start items-start gap-2"> onRegenerate={handleGenerateCompanyReport}
{/* Search */} isGenerating={generatingCompanyReport}
<div className="self-stretch px-2.5 flex flex-col justify-start items-start gap-2"> />
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z" stroke="var(--Neutrals-NeutralSlate500, #717680)" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<input
type="text"
placeholder="Search"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight outline-none"
/>
</div>
</div>
</div>
{/* Employee List */}
<div className="self-stretch px-3 flex flex-col justify-start items-start">
{/* Company Report Item */}
{currentUserIsOwner && (
<div
className={`self-stretch p-2 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer ${selectedReport?.type === 'company' ? 'bg-Main-BG-Gray-100' : ''
}`}
onClick={handleCompanyReportSelect}
>
<div className="w-7 h-7 p-1 bg-[--Brand-Orange] rounded-[666.67px] flex justify-center items-center">
<div className="text-center justify-start text-white text-xs font-medium font-['Inter'] leading-none">
C
</div>
</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight">Company Report</div>
</div>
)}
{/* Employee Items */}
{visibleEmployees.map((employee) => (
<div
key={employee.id}
className={`self-stretch p-2 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer ${selectedReport?.type === 'employee' && selectedReport?.employeeName === employee.name ? 'bg-Main-BG-Gray-100' : ''
}`}
onClick={() => handleEmployeeSelect(employee)}
>
<div className="w-7 h-7 p-1 bg-Main-BG-Gray-100 rounded-[666.67px] flex justify-center items-center">
<div className="text-center justify-start text-[--Neutrals-NeutralSlate500] text-xs font-medium font-['Inter'] leading-none">
{employee.initials}
</div>
</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">
{employee.name}
</div>
</div>
))}
</div>
</div>
</div>
{/* Main Content Area */}
<div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
{selectedReport ? (
selectedReport.type === 'company' ? (
<CompanyReportContent
report={selectedReport.report as CompanyReport}
onRegenerate={handleGenerateCompanyReport}
isGenerating={generatingCompanyReport}
/>
) : (
<EmployeeReportContent
report={selectedReport.report as EmployeeReport}
employeeName={selectedReport.employeeName!}
/>
)
) : ( ) : (
<div className="flex-1 flex items-center justify-center"> <EmployeeReportContent
<div className="text-center"> report={selectedReport.report as EmployeeReport}
<h3 className="text-lg font-semibold text-[--Neutrals-NeutralSlate950] mb-2"> employeeName={selectedReport.employeeName!}
Select a Report />
</h3> )
<p className="text-[--Neutrals-NeutralSlate500]"> ) : (
Choose a company or employee report from the list to view details. <div className="flex-1 flex items-center justify-center">
</p> <div className="text-center">
</div> <h3 className="text-lg font-semibold text-[--Neutrals-NeutralSlate950] mb-2">
Select a Report
</h3>
<p className="text-[--Neutrals-NeutralSlate500]">
Choose a company or employee report from the list to view details.
</p>
</div> </div>
)} </div>
</div> )}
</div> </div>
</div> </div>
</div> </div>
@@ -319,7 +199,10 @@ const CompanyReportContent: React.FC<{
onRegenerate: () => void; onRegenerate: () => void;
isGenerating: boolean; isGenerating: boolean;
}> = ({ report, onRegenerate, isGenerating }) => { }> = ({ report, onRegenerate, isGenerating }) => {
const [activeDepartmentTab, setActiveDepartmentTab] = useState('Campaigns'); // Default to the first department in the array
const [activeDepartmentTab, setActiveDepartmentTab] = useState(() =>
report?.gradingBreakdown?.[0]?.departmentNameShort || 'Campaigns'
);
return ( return (
<> <>
@@ -331,11 +214,11 @@ const CompanyReportContent: React.FC<{
<div className="px-3 py-2.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden"> <div className="px-3 py-2.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden">
<div className="relative"> <div className="relative">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 14H2M12 7.33333L8 11.3333M8 11.3333L4 7.33333M8 11.3333V2" stroke="var(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M14 14H2M12 7.33333L8 11.3333M8 11.3333L4 7.33333M8 11.3333V2" stroke="var(--Neutrals-NeutralSlate0)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
</div> </div>
<div className="px-1 flex justify-center items-center"> <div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Download as PDF</div> <div className="justify-center text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight">Download as PDF</div>
</div> </div>
</div> </div>
</div> </div>
@@ -343,29 +226,29 @@ const CompanyReportContent: React.FC<{
{/* Content */} {/* Content */}
<div className="self-stretch flex flex-col justify-start items-start gap-4 px-5 pb-6 overflow-y-auto"> <div className="self-stretch flex flex-col justify-start items-start gap-4 px-5 pb-6 overflow-y-auto">
{/* Company Weaknesses */} {/* Company Weaknesses */}
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Company Weaknesses</div> <div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Company Weaknesses</div>
</div> </div>
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4"> <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate100] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-4">
{report?.weaknesses?.map((weakness, index) => ( {report?.weaknesses?.map((weakness, index) => (
<div key={index}> <div key={index}>
<div className="self-stretch inline-flex justify-between items-start"> <div className="self-stretch inline-flex justify-between items-start">
<div className="w-48 justify-start text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">{weakness.title}:</div> <div className="w-48 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">{weakness.title}:</div>
<div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">{weakness.description}</div> <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">{weakness.description}</div>
</div> </div>
{index < (report?.weaknesses?.length || 0) - 1 && ( {index < (report?.weaknesses?.length || 0) - 1 && (
<div className="my-4"> <div className="mt-4 self-stretch w-full flex">
<svg width="784" height="2" viewBox="0 0 784 2" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="100%" height="2" viewBox="0 0 9999 2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1H784" stroke="var(--Text-Gray-200, #E9EAEB)" /> <line x1="0" y1="1" x2="9999" y2="1" stroke="var(--Neutrals-NeutralSlate300)" stroke-width="2" />
</svg> </svg>
</div> </div>
)} )}
</div> </div>
)) || ( )) || (
<div className="self-stretch inline-flex justify-between items-start"> <div className="self-stretch inline-flex justify-between items-start">
<div className="w-48 justify-start text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Lack of Structure:</div> <div className="w-48 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Lack of Structure:</div>
<div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">People are confused about their roles. No one knows who's responsible.</div> <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">People are confused about their roles. No one knows who's responsible.</div>
</div> </div>
)} )}
</div> </div>
@@ -373,16 +256,15 @@ const CompanyReportContent: React.FC<{
{/* Personnel Changes */} {/* Personnel Changes */}
{report?.personnelChanges && ( {report?.personnelChanges && (
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Personnel Changes</div> <div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Personnel Changes</div>
</div> </div>
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-6"> <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-6">
{/* New Hires */} {/* New Hires */}
{report.personnelChanges.newHires && report.personnelChanges.newHires.length > 0 && ( {report.personnelChanges.newHires && report.personnelChanges.newHires.length > 0 && (
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">New Hires</div> <div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">New Hires</div>
{report.personnelChanges.newHires.map((hire, index) => ( {report.personnelChanges.newHires.map((hire, index) => (
<div key={index} className="self-stretch p-3 bg-green-50 rounded-lg border border-green-200"> <div key={index} className="self-stretch p-3 bg-green-50 rounded-lg border border-green-200">
<div className="font-medium text-green-800">{hire.name} - {hire.role}</div> <div className="font-medium text-green-800">{hire.name} - {hire.role}</div>
@@ -396,7 +278,7 @@ const CompanyReportContent: React.FC<{
{/* Promotions */} {/* Promotions */}
{report.personnelChanges.promotions && report.personnelChanges.promotions.length > 0 && ( {report.personnelChanges.promotions && report.personnelChanges.promotions.length > 0 && (
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Promotions</div> <div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Promotions</div>
{report.personnelChanges.promotions.map((promotion, index) => ( {report.personnelChanges.promotions.map((promotion, index) => (
<div key={index} className="self-stretch p-3 bg-blue-50 rounded-lg border border-blue-200"> <div key={index} className="self-stretch p-3 bg-blue-50 rounded-lg border border-blue-200">
<div className="font-medium text-blue-800">{promotion.name}</div> <div className="font-medium text-blue-800">{promotion.name}</div>
@@ -410,7 +292,7 @@ const CompanyReportContent: React.FC<{
{/* Departures */} {/* Departures */}
{report.personnelChanges.departures && report.personnelChanges.departures.length > 0 && ( {report.personnelChanges.departures && report.personnelChanges.departures.length > 0 && (
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Departures</div> <div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Departures</div>
{report.personnelChanges.departures.map((departure, index) => ( {report.personnelChanges.departures.map((departure, index) => (
<div key={index} className="self-stretch p-3 bg-red-50 rounded-lg border border-red-200"> <div key={index} className="self-stretch p-3 bg-red-50 rounded-lg border border-red-200">
<div className="font-medium text-red-800">{departure.name}</div> <div className="font-medium text-red-800">{departure.name}</div>
@@ -426,7 +308,7 @@ const CompanyReportContent: React.FC<{
{(!report.personnelChanges.newHires || report.personnelChanges.newHires.length === 0) && {(!report.personnelChanges.newHires || report.personnelChanges.newHires.length === 0) &&
(!report.personnelChanges.promotions || report.personnelChanges.promotions.length === 0) && (!report.personnelChanges.promotions || report.personnelChanges.promotions.length === 0) &&
(!report.personnelChanges.departures || report.personnelChanges.departures.length === 0) && ( (!report.personnelChanges.departures || report.personnelChanges.departures.length === 0) && (
<div className="self-stretch text-Text-Gray-500 text-base font-normal font-['Inter'] leading-normal"> <div className="self-stretch text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">
No personnel changes to report. No personnel changes to report.
</div> </div>
)} )}
@@ -436,30 +318,43 @@ const CompanyReportContent: React.FC<{
{/* Hiring Needs */} {/* Hiring Needs */}
{report?.immediateHiringNeeds && report.immediateHiringNeeds.length > 0 && ( {report?.immediateHiringNeeds && report.immediateHiringNeeds.length > 0 && (
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Immediate Hiring Needs</div> <div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Immediate Hiring Needs</div>
</div> </div>
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4"> {/* <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-start items-start gap-4">
{report.immediateHiringNeeds.map((need, index) => ( {report.immediateHiringNeeds.map((need, index) => (
<div key={index} className="self-stretch p-4 bg-white rounded-lg border border-Text-Gray-200 flex flex-col justify-start items-start gap-2"> <div key={index} className="self-stretch inline-flex justify-between items-start">
<div className="flex justify-between items-start w-full"> <div className="w-48 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">{need.role} - {need.department}</div>
<div className="flex flex-col gap-1"> <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal"> <div className={`inline-flex px-2 py-1 rounded-full text-xs font-medium ${need.priority === 'High' ? 'bg-red-100 text-red-800' :
{need.role} - {need.department} need.priority === 'Medium' ? 'bg-yellow-100 text-yellow-800' :
</div> 'bg-green-100 text-green-800'
<div className={`inline-flex px-2 py-1 rounded-full text-xs font-medium ${need.priority === 'High' ? 'bg-red-100 text-red-800' : }`}>
need.priority === 'Medium' ? 'bg-yellow-100 text-yellow-800' : {need.priority} Priority
'bg-green-100 text-green-800'
}`}>
{need.priority} Priority
</div>
</div> </div>
</div> </div>
<div className="text-Text-Gray-600 text-sm font-normal font-['Inter'] leading-normal">
{need.reasoning}
</div>
</div> </div>
<div className="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-[--Neutrals-NeutralSlate200]">
<hr className="border-0 border-t border-[--Neutrals-NeutralSlate200]" />
</div>
))}
</div> */}
<div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-start items-start gap-4">
{report.immediateHiringNeeds.map((need, index) => (
<React.Fragment key={index}>
<div key={index} className="self-stretch content-end inline-flex justify-around items-center ">
<div className="flex-2 w-max p-3 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">{need.role} - {need.department}</div>
<div className="flex-9 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">{need.reasoning}</div>
</div>
{index !== report.immediateHiringNeeds.length - 1 && (
<div className="inline-flex self-stretch" data-svg-wrapper>
<svg width="100%" height="4" viewBox="0 0 9999 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,0 H9999 M 0,1 H9999 M 0,2 H9999 M 0,3 H9999 M 0,4 H9999" stroke="var(--Neutrals-NeutralSlate900)" />
</svg>
</div>
)}
</React.Fragment>
))} ))}
</div> </div>
</div> </div>
@@ -467,23 +362,28 @@ const CompanyReportContent: React.FC<{
{/* Forward Plan */} {/* Forward Plan */}
{report?.forwardOperatingPlan && ( {report?.forwardOperatingPlan && (
<div className="w-full self-stretch p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Forward Plan</div> <div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Forward Plan</div>
</div> </div>
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4"> <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-4">
{ {
report.forwardOperatingPlan.map((plan, index) => ( report.forwardOperatingPlan.map((plan, index) => (
<div key={index} className="self-stretch flex flex-col justify-start items-start gap-4"> <div key={index} className="self-stretch flex flex-col justify-start items-start gap-4">
<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-4">
<div className="justify-start text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">{plan.title}</div> <div className="justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal tracking-wide font-['Neue_Montreal'] leading-normal">{plan.title}</div>
<div className="self-stretch h-12 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
{plan.details.map((detail, idx) => ( <ul className="list-none space-y-1">
<p key={idx}>{detail}</p> {plan.details.map((detail, idx) => (
))} <li key={idx} className="ps-2 flex items-center gap-3 font-['Neue_Montreal'] tracking-wide">
<span className="h-1 w-1 rounded-full bg-[--Neutrals-NeutralSlate800] flex-shrink-0"></span>
<span>{detail}</span>
</li>
))}
</ul>
</div> </div>
</div> </div>
<div className="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-Text-Gray-200" /> {index !== report.forwardOperatingPlan.length - 1 && <div className="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-[--Neutrals-NeutralSlate200]" />}
</div> </div>
)) ))
} }
@@ -495,22 +395,22 @@ const CompanyReportContent: React.FC<{
Strengths goes here Strengths goes here
*/} */}
{report?.strengths && ( {report?.strengths && (
<div className="self-stretch p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] inline-flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] inline-flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Strengths</div> <div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Strengths</div>
</div> </div>
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4"> <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-4">
{report.strengths.map((strength, idx) => ( {report.strengths.map((strength, idx) => (
<div key={idx} className="self-stretch inline-flex justify-start items-start gap-4"> <div key={idx} className="self-stretch inline-flex justify-start items-start gap-4">
<div className="w-6 h-6 relative rounded-[999px] overflow-hidden"> <div className="w-6 h-6 relative rounded-[999px] overflow-hidden">
<div className="w-6 h-6 left-0 top-0 absolute bg-Other-Green rounded-full" /> <div className="w-6 h-6 left-0 top-0 absolute bg-[--Other-Green] rounded-full" />
<div data-svg-wrapper className="left-[5px] top-[5px] absolute"> <div data-svg-wrapper className="left-[5px] top-[5px] absolute">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6666 3.5L5.24998 9.91667L2.33331 7" stroke="var(--Neutrals-NeutralSlate0, #FDFDFD)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M11.6666 3.5L5.24998 9.91667L2.33331 7" stroke="var(--Neutrals-NeutralSlate0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </svg>
</div> </div>
</div> </div>
<div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">{strength}</div> <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">{strength}</div>
</div> </div>
))} ))}
</div> </div>
@@ -521,23 +421,22 @@ const CompanyReportContent: React.FC<{
Organizational Impact Summary Organizational Impact Summary
*/} */}
{report?.organizationalImpactSummary && ( {report?.organizationalImpactSummary && (
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Organizational Impact Summary</div> <div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Organizational Impact Summary</div>
</div> </div>
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-6"> <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-6">
{/* Mission Critical */} {/* Mission Critical */}
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="flex justify-start items-center gap-2"> <div className="flex justify-start items-center gap-2">
<div className="w-3 h-3 bg-red-500 rounded-full"></div> <div className="w-3 h-3 bg-red-500 rounded-full"></div>
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Mission Critical</div> <div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Mission Critical</div>
</div> </div>
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
{report.organizationalImpactSummary.missionCritical.map((employee, index) => ( {report.organizationalImpactSummary.missionCritical.map((employee, index) => (
<div key={index} className="self-stretch flex justify-between items-start"> <div key={index} className="self-stretch flex justify-between items-start">
<div className="w-48 text-Text-Gray-800 text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div> <div className="w-48 text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
<div className="flex-1 text-Text-Gray-800 text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div> <div className="flex-1 text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
</div> </div>
))} ))}
</div> </div>
@@ -547,13 +446,13 @@ const CompanyReportContent: React.FC<{
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="flex justify-start items-center gap-2"> <div className="flex justify-start items-center gap-2">
<div className="w-3 h-3 bg-orange-500 rounded-full"></div> <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Highly Valuable</div> <div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Highly Valuable</div>
</div> </div>
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
{report.organizationalImpactSummary.highlyValuable.map((employee, index) => ( {report.organizationalImpactSummary.highlyValuable.map((employee, index) => (
<div key={index} className="self-stretch flex justify-between items-start"> <div key={index} className="self-stretch flex justify-between items-start">
<div className="w-48 text-Text-Gray-800 text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div> <div className="w-48 text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
<div className="flex-1 text-Text-Gray-800 text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div> <div className="flex-1 text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
</div> </div>
))} ))}
</div> </div>
@@ -563,13 +462,13 @@ const CompanyReportContent: React.FC<{
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="flex justify-start items-center gap-2"> <div className="flex justify-start items-center gap-2">
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div> <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Core Support</div> <div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Core Support</div>
</div> </div>
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
{report.organizationalImpactSummary.coreSupport.map((employee, index) => ( {report.organizationalImpactSummary.coreSupport.map((employee, index) => (
<div key={index} className="self-stretch flex justify-between items-start"> <div key={index} className="self-stretch flex justify-between items-start">
<div className="w-48 text-Text-Gray-800 text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div> <div className="w-48 text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
<div className="flex-1 text-Text-Gray-800 text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div> <div className="flex-1 text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
</div> </div>
))} ))}
</div> </div>
@@ -579,13 +478,13 @@ const CompanyReportContent: React.FC<{
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="flex justify-start items-center gap-2"> <div className="flex justify-start items-center gap-2">
<div className="w-3 h-3 bg-green-500 rounded-full"></div> <div className="w-3 h-3 bg-green-500 rounded-full"></div>
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Low Criticality</div> <div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Low Criticality</div>
</div> </div>
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
{report.organizationalImpactSummary.lowCriticality.map((employee, index) => ( {report.organizationalImpactSummary.lowCriticality.map((employee, index) => (
<div key={index} className="self-stretch flex justify-between items-start"> <div key={index} className="self-stretch flex justify-between items-start">
<div className="w-48 text-Text-Gray-800 text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div> <div className="w-48 text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
<div className="flex-1 text-Text-Gray-800 text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div> <div className="flex-1 text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
</div> </div>
))} ))}
</div> </div>
@@ -595,110 +494,110 @@ const CompanyReportContent: React.FC<{
)} )}
{/* Grading Overview */} {/* Grading Overview */}
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Grading Overview</div> <div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Grading Overview</div>
</div> </div>
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="p-1 bg-Text-Gray-200 rounded-full outline outline-1 outline-offset-[-1px] outline-Outline-Outline-Gray-200 inline-flex justify-start items-center gap-1"> <div className="p-1 bg-[--Neutrals-NeutralSlate200] rounded-full outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate50] inline-flex justify-start items-center gap-1">
{/* Department Tabs */} {/* Department Tabs */}
{['Campaigns', 'Social Media', 'Creative', 'Tech', 'Admin/OPS'].map((dept) => ( {report?.gradingBreakdown?.map(dept => (
<div <div
key={dept} key={dept.departmentNameShort}
className={`px-3 py-1.5 rounded-full flex justify-center items-center gap-1 overflow-hidden cursor-pointer ${activeDepartmentTab === dept className={`px-3 py-1.5 rounded-full flex justify-center items-center gap-1 overflow-hidden cursor-pointer ${activeDepartmentTab === dept.departmentNameShort
? 'bg-Main-BG-White-0' ? 'bg-[--Neutrals-NeutralSlate0]'
: 'shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)]' : 'bg-[--Neutrals-NeutralSlate100] shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)]'
}`} }`}
onClick={() => setActiveDepartmentTab(dept)} onClick={() => setActiveDepartmentTab(dept.departmentNameShort)}
> >
<div className="px-0.5 flex justify-center items-center"> <div className="px-0.5 flex justify-center items-center">
<div className={`justify-start text-xs font-medium font-['Inter'] leading-none ${activeDepartmentTab === dept ? 'text-Text-Dark-950' : 'text-zinc-600' <div className={`justify-start text-xs font-medium font-['Inter'] leading-none ${activeDepartmentTab === dept.departmentNameShort ? 'text-[--Neutrals-NeutralSlate950]' : 'text-zinc-600'
}`}> }`}>
{dept} {dept.departmentNameShort}
</div> </div>
</div> </div>
</div> </div>
))} ))}
</div> </div>
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4"> {/* Content for the currently selected department */}
{/* Department Overview Section */} {(() => {
<div className="self-stretch p-5 bg-Text-Gray-100 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-3 overflow-hidden"> const currentDepartment = report?.gradingBreakdown?.find(dept => dept.departmentNameShort === activeDepartmentTab);
<div className="self-stretch inline-flex justify-between items-center"> if (!currentDepartment) return null;
<div className="w-48 justify-start text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Department Overview</div>
<div className="pl-3 pr-1 py-1 bg-green-500/10 rounded-2xl flex justify-start items-center gap-2"> return (
<div className="justify-start text-Text-Gray-800 text-sm font-medium font-['Inter'] leading-tight">Overall Grade</div> <div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate100] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-4">
<div className="px-2 bg-green-500 rounded-2xl flex justify-start items-center"> {/* Department Overview Section */}
<div className="text-center justify-start text-Text-White-00 text-sm font-medium font-['Inter'] leading-tight">A</div> <div className="self-stretch p-5 bg-[--Neutrals-NeutralSlate100] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-3 overflow-hidden">
<div className="self-stretch inline-flex justify-between items-center">
<div className="w-48 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Department Overview</div>
<div className="pl-3 pr-1 py-1 bg-green-500/10 rounded-2xl flex justify-start items-center gap-2">
<div className="justify-start text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">Overall Grade</div>
<div className="px-2 bg-green-500 rounded-2xl flex justify-start items-center">
<div className="text-center justify-start text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight">A</div>
</div>
</div>
</div>
<div>
<svg width="752" height="2" viewBox="0 0 752 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1H752" stroke="var(--Neutrals-NeutralSlate300)" />
</svg>
</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">
Overall company performance shows strong collaboration and delivery with opportunities for process improvement.
</div> </div>
</div> </div>
</div>
<div>
<svg width="752" height="2" viewBox="0 0 752 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1H752" stroke="var(--Text-Gray-300, #D5D7DA)" />
</svg>
</div>
<div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
Overall company performance shows strong collaboration and delivery with opportunities for process improvement.
</div>
</div>
{/* Employee Radar Charts Section */} {/* Employee Radar Charts Section */}
<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-4">
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Team Performance Analysis</div> <div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Team Performance Analysis</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
{report?.gradingBreakdown?.teamScores {currentDepartment.teamScores?.map((teamScore, index) => {
?.filter(teamScore => { const radarData = [
// Filter employees based on active department tab { label: 'Reliability', value: teamScore.reliability * 10 },
// For now, showing all employees as we don't have department info per employee { label: 'Role Fit', value: teamScore.roleFit * 10 },
// In a real implementation, you'd filter by employee department { label: 'Scalability', value: teamScore.scalability * 10 },
return true; { label: 'Output', value: teamScore.output * 10 },
}) { label: 'Initiative', value: teamScore.initiative * 10 }
?.map((teamScore, index) => { ];
const radarData = [
{ label: 'Reliability', value: teamScore.reliability * 10 },
{ label: 'Role Fit', value: teamScore.roleFit * 10 },
{ label: 'Scalability', value: teamScore.scalability * 10 },
{ label: 'Output', value: teamScore.output * 10 },
{ label: 'Initiative', value: teamScore.initiative * 10 }
];
return ( return (
<div key={index} className="p-4 bg-white rounded-lg shadow-sm border border-Text-Gray-200 flex flex-col justify-start items-center gap-3"> <div key={index} className="p-4 bg-[--Neutrals-NeutralSlate50] rounded-lg shadow-sm border border-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-center gap-3">
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<h3 className="text-base font-semibold text-Text-Gray-800">{teamScore.employeeName}</h3> <h3 className="text-base font-semibold text-[--Neutrals-NeutralSlate800]">{teamScore.employeeName}</h3>
<div className={`px-2 py-1 rounded-full text-xs font-medium ${teamScore.grade.startsWith('A') ? 'bg-green-100 text-green-800' : <div className={`px-2 py-1 rounded-full text-xs font-medium ${teamScore.grade.startsWith('A') ? 'bg-green-100 text-green-800' :
teamScore.grade.startsWith('B') ? 'bg-blue-100 text-blue-800' : teamScore.grade.startsWith('B') ? 'bg-blue-100 text-blue-800' :
teamScore.grade.startsWith('C') ? 'bg-yellow-100 text-yellow-800' : teamScore.grade.startsWith('C') ? 'bg-yellow-100 text-yellow-800' :
'bg-red-100 text-red-800' 'bg-red-100 text-red-800'
}`}> }`}>
Grade: {teamScore.grade} Grade: {teamScore.grade}
</div>
</div>
<div className="w-full h-64">
<RadarPerformanceChart
data={radarData}
height={240}
color={
teamScore.grade.startsWith('A') ? '#22c55e' :
teamScore.grade.startsWith('B') ? '#3b82f6' :
teamScore.grade.startsWith('C') ? '#f59e0b' :
'#ef4444'
}
/>
</div> </div>
</div> </div>
<div className="w-full h-64"> );
<RadarPerformanceChart })}
data={radarData} </div>
height={240} </div>
color={
teamScore.grade.startsWith('A') ? '#22c55e' :
teamScore.grade.startsWith('B') ? '#3b82f6' :
teamScore.grade.startsWith('C') ? '#f59e0b' :
'#ef4444'
}
/>
</div>
</div>
);
})
}
</div> </div>
</div> );
</div> })()}
</div> </div>
</div> </div>
{/* Company Strengths */} {/* Company Strengths */}
{/* {report?.organizationalStrengths && ( {/* {report?.organizationalStrengths && (
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Company Strengths</div> <div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Company Strengths</div>
</div> </div>
@@ -721,7 +620,7 @@ const CompanyReportContent: React.FC<{
</div> </div>
</div> </div>
)} */} )} */}
</div> </div >
</> </>
); );
}; };
@@ -753,7 +652,7 @@ const EmployeeReportContent: React.FC<{
{/* Content */} {/* Content */}
<div className="self-stretch flex flex-col justify-start items-start gap-4 px-5 pb-6 overflow-y-auto"> <div className="self-stretch flex flex-col justify-start items-start gap-4 px-5 pb-6 overflow-y-auto">
{/* Role & Responsibilities */} {/* Role & Responsibilities */}
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Role & Responsibilities</div> <div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Role & Responsibilities</div>
</div> </div>
@@ -766,7 +665,7 @@ const EmployeeReportContent: React.FC<{
{/* Self-Rated Output */} {/* Self-Rated Output */}
{report.roleAndOutput?.selfRatedOutput && ( {report.roleAndOutput?.selfRatedOutput && (
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Self-Rated Output</div> <div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Self-Rated Output</div>
</div> </div>
@@ -780,7 +679,7 @@ const EmployeeReportContent: React.FC<{
{/* Insights */} {/* Insights */}
{report.insights && ( {report.insights && (
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Insights & Traits</div> <div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Insights & Traits</div>
</div> </div>
@@ -815,7 +714,7 @@ const EmployeeReportContent: React.FC<{
{/* Strengths */} {/* Strengths */}
{report.strengths && report.strengths.length > 0 && ( {report.strengths && report.strengths.length > 0 && (
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Strengths</div> <div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Strengths</div>
</div> </div>
@@ -839,7 +738,7 @@ const EmployeeReportContent: React.FC<{
{/* Recommendations */} {/* Recommendations */}
{report.recommendations && report.recommendations.length > 0 && ( {report.recommendations && report.recommendations.length > 0 && (
<div className="w-full p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"> <div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2"> <div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Recommendations</div> <div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Recommendations</div>
</div> </div>

6
src/pages/SettingsNew.tsx
View File

@@ -72,7 +72,7 @@ const SettingsNew: React.FC = () => {
General Settings General Settings
</div> </div>
{activeTab === 'general' && ( {activeTab === 'general' && (
<div className="self-stretch h-0.5 bg-Text-Gray-800 rounded-tl-lg rounded-tr-lg" /> <div className="self-stretch h-0.5 bg-[--Neutrals-NeutralSlate800] rounded-tl-lg rounded-tr-lg" />
)} )}
</div> </div>
<div <div
@@ -87,11 +87,11 @@ const SettingsNew: React.FC = () => {
Plan & Billings Plan & Billings
</div> </div>
{activeTab === 'billing' && ( {activeTab === 'billing' && (
<div className="w-24 h-0.5 bg-Text-Gray-800 rounded-tl-lg rounded-tr-lg" /> <div className="w-24 h-0.5 bg-[--Neutrals-NeutralSlate800] rounded-tl-lg rounded-tr-lg" />
)} )}
</div> </div>
</div> </div>
<div className="w-24 h-0.5 opacity-0 bg-Text-Gray-800 rounded-tl-lg rounded-tr-lg" /> <div className="w-24 h-0.5 opacity-0 bg-[--Neutrals-NeutralSlate800] rounded-tl-lg rounded-tr-lg" />
</div> </div>
{/* General Settings Content */} {/* General Settings Content */}

326
src/pages/Submissions.tsx Normal file
View File

@@ -0,0 +1,326 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useOrg } from '../contexts/OrgContext';
import { useAuth } from '../contexts/AuthContext';
import { secureApiPOST, secureApi } from '../services/secureApi';
import { Employee } from '../types';
import { EMPLOYEE_QUESTIONS } from '../employeeQuestions';
interface EmployeeSubmission {
employeeId: string;
answers: Record<string, string>;
submittedAt: number;
employee?: Employee;
}
const Submissions: React.FC = () => {
const navigate = useNavigate();
const { employees, user, isOwner, orgId } = useOrg();
const [submissions, setSubmissions] = useState<Record<string, EmployeeSubmission>>({});
const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [loading, setLoading] = useState(true);
const currentUserIsOwner = isOwner(user?.uid || '');
// Load submissions on component mount
useEffect(() => {
const loadSubmissions = async () => {
try {
setLoading(true);
// Use the secure API service to get submissions
// const data = await secureApi.getSubmissions();
const data = { submissions: [] }; // temp fix
if (data) {
setSubmissions(data.submissions);
// Auto-select first employee with submission
const employeesWithSubmissions = employees.filter(emp => data.submissions?.[emp.id]);
if (employeesWithSubmissions.length > 0) {
setSelectedEmployee(employeesWithSubmissions[0]);
}
} else {
console.error('Failed to load submissions:', response.statusText);
}
} catch (error) {
console.error('Error loading submissions:', error);
// Load demo data for development
loadDemoSubmissions();
} finally {
setLoading(false);
}
};
loadSubmissions();
}, [employees]);
const loadDemoSubmissions = () => {
// Demo submission data for testing
const demoSubmissions: Record<string, EmployeeSubmission> = {};
employees.forEach((employee, index) => {
if (index < 3) { // Only add submissions for first 3 employees
demoSubmissions[employee.id] = {
employeeId: employee.id,
employee,
submittedAt: Date.now() - (index * 86400000), // Stagger dates
answers: {
full_name: employee.name,
email: employee.email,
title_department: employee.role || 'Team Member',
mission: 'To empower small businesses with AI-driven automation tools that increase efficiency and reduce operational overhead.',
mission_evolution: 'We shifted from general SaaS tools to vertical-specific solutions, with deeper integrations and onboarding support.',
vision: 'To become the leading AI operations platform for SMBs in North America, serving over 100,000 customers.',
advantages: 'Fast product iteration enabled by in-house AI capabilities\nDeep customer understanding from vertical specialization\nHigh customer retention due to integrated onboarding',
vulnerabilities: 'Dependence on a single marketing channel, weak middle management, and rising customer acquisition costs.',
role_clarity: 'I understand my role clearly and feel aligned with company objectives.',
performance_output: 'I consistently deliver high-quality work and meet deadlines.',
collaboration: 'I work well with my team and communicate effectively.',
additional_feedback: 'I would appreciate more structured processes and clearer communication channels.'
}
};
}
});
setSubmissions(demoSubmissions);
const employeesWithSubmissions = employees.filter(emp => demoSubmissions[emp.id]);
if (employeesWithSubmissions.length > 0) {
setSelectedEmployee(employeesWithSubmissions[0]);
}
};
// Filter employees: show only those with submissions, and apply search
const visibleEmployees = employees
.filter(emp => submissions[emp.id]) // Only employees with submissions
.filter(emp => emp.name.toLowerCase().includes(searchQuery.toLowerCase()))
.sort((a, b) => a.name.localeCompare(b.name));
const handleEmployeeSelect = (employee: Employee) => {
setSelectedEmployee(employee);
};
const handleViewReport = () => {
if (selectedEmployee) {
// Navigate to reports page with the selected employee
navigate('/reports', { state: { selectedEmployeeId: selectedEmployee.id } });
}
};
const handleChatWithAI = () => {
if (selectedEmployee) {
// Navigate to chat page with employee context
navigate('/chat', { state: { employeeContext: selectedEmployee } });
}
};
// Get questions and answers for selected employee
const getEmployeeQuestionsAndAnswers = () => {
if (!selectedEmployee || !submissions[selectedEmployee.id]) {
return [];
}
const submission = submissions[selectedEmployee.id];
const questionsAndAnswers: Array<{ question: string; answer: string; isLong?: boolean }> = [];
// Map EMPLOYEE_QUESTIONS to actual answers
EMPLOYEE_QUESTIONS.forEach(q => {
const answer = submission.answers[q.id];
if (answer && answer.trim()) {
questionsAndAnswers.push({
question: q.prompt,
answer: answer,
isLong: answer.length > 150 // Mark long answers for different styling
});
}
});
return questionsAndAnswers;
};
if (loading) {
return (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<h3 className="text-lg font-semibold text-[--Neutrals-NeutralSlate950] mb-2">
Loading Submissions...
</h3>
</div>
</div>
);
}
return (
<div className="h-full flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
{/* Middle Section - Employee List */}
<div className="flex-1 self-stretch bg-[--Neutrals-NeutralSlate0] flex justify-start items-center">
<div className="flex-1 self-stretch max-w-64 min-w-64 border-r 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] text-base font-medium font-['Inter'] leading-normal">Employees</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
{/* Search */}
<div className="self-stretch px-2.5 flex flex-col justify-start items-start gap-2">
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z" stroke="var(--Neutrals-NeutralSlate500, #717680)" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<input
type="text"
placeholder="search team"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight outline-none"
/>
</div>
</div>
</div>
{/* Employee List */}
<div className="self-stretch px-3 flex flex-col justify-start items-start">
{visibleEmployees.length === 0 ? (
<div className="self-stretch p-4 text-center text-[--Neutrals-NeutralSlate500] text-sm">
{searchQuery ? 'No employees found matching your search.' : 'No employee submissions found.'}
</div>
) : (
visibleEmployees.map((employee) => (
<div
key={employee.id}
className={`self-stretch p-2 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer ${selectedEmployee?.id === employee.id ? 'bg-[--Neutrals-NeutralSlate100]' : ''
}`}
onClick={() => handleEmployeeSelect(employee)}
>
<div className="w-7 h-7 p-1 bg-[--Neutrals-NeutralSlate700] rounded-[666.67px] flex justify-center items-center">
<div className="text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none">
{employee.initials}
</div>
</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">
{employee.name}
</div>
</div>
))
)}
</div>
</div>
</div>
{/* Main Content Area */}
<div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
{selectedEmployee ? (
<SubmissionContent
employee={selectedEmployee}
submission={submissions[selectedEmployee.id]}
onViewReport={handleViewReport}
onChatWithAI={handleChatWithAI}
questionsAndAnswers={getEmployeeQuestionsAndAnswers()}
/>
) : (
<div className="flex-1 self-stretch flex items-center justify-center">
<div className="text-center">
<h3 className="text-lg font-semibold text-[--Neutrals-NeutralSlate950] mb-2">
Select an Employee
</h3>
<p className="text-[--Neutrals-NeutralSlate500]">
Choose an employee from the list to view their submission answers.
</p>
</div>
</div>
)}
</div>
</div>
</div>
);
};
// Component for displaying submission content
const SubmissionContent: React.FC<{
employee: Employee;
submission: EmployeeSubmission;
onViewReport: () => void;
onChatWithAI: () => void;
questionsAndAnswers: Array<{ question: string; answer: string; isLong?: boolean }>;
}> = ({ employee, submission, onViewReport, onChatWithAI, questionsAndAnswers }) => {
return (
<>
{/* Header */}
<div className="self-stretch px-5 py-3 inline-flex justify-start items-center gap-2.5">
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-medium font-['Inter'] leading-normal">
{employee.name}'s Answers
</div>
<div className="flex justify-start items-center gap-3">
<button
onClick={onChatWithAI}
className="px-3 py-2.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate200] transition-colors"
>
<div className="relative">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9997 7.66667C13.9997 10.7963 11.4627 13.3333 8.33304 13.3333C7.61519 13.3333 6.92851 13.1999 6.29648 12.9564C6.18092 12.9118 6.12314 12.8896 6.0772 12.879C6.03201 12.8686 5.99929 12.8642 5.95295 12.8624C5.90583 12.8606 5.85414 12.866 5.75075 12.8767L2.33674 13.2296C2.01124 13.2632 1.84849 13.2801 1.75249 13.2215C1.66887 13.1705 1.61192 13.0853 1.59676 12.9885C1.57936 12.8774 1.65713 12.7335 1.81267 12.4456L2.9031 10.4272C2.99291 10.261 3.03781 10.1779 3.05814 10.098C3.07823 10.019 3.08309 9.96213 3.07666 9.88095C3.07016 9.79875 3.03409 9.69175 2.96196 9.47774C2.77027 8.90906 2.66638 8.3 2.66638 7.66667C2.66638 4.53705 5.20343 2 8.33304 2C11.4627 2 13.9997 4.53705 13.9997 7.66667Z" stroke="var(--Neutrals-NeutralSlate800, #252B37)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">Chat With AI</div>
</div>
</button>
<button
onClick={onViewReport}
className="px-3 py-2.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate200] transition-colors"
>
<div className="relative">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_1042_7203)">
<path d="M8.00004 1.33398C8.87552 1.33398 9.74243 1.50642 10.5513 1.84145C11.3601 2.17649 12.095 2.66755 12.7141 3.28661C13.3331 3.90567 13.8242 4.64059 14.1592 5.44943C14.4943 6.25827 14.6667 7.12518 14.6667 8.00066M8.00004 1.33398V8.00065M8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673C11.6819 14.6673 14.6667 11.6826 14.6667 8.00066M8.00004 1.33398C11.6819 1.33398 14.6667 4.31876 14.6667 8.00066M14.6667 8.00066L8.00004 8.00065M14.6667 8.00066C14.6667 9.05273 14.4177 10.0899 13.9401 11.0273C13.4625 11.9647 12.7698 12.7757 11.9186 13.3941L8.00004 8.00065" stroke="var(--Neutrals-NeutralSlate800, #252B37)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</g>
<defs>
<clipPath id="clip0_1042_7203">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">View Report</div>
</div>
</button>
</div>
</div>
{/* Content */}
<div className="self-stretch px-5 py-2 flex flex-col justify-start items-start gap-4 overflow-y-auto">
{questionsAndAnswers.length === 0 ? (
<div className="self-stretch text-center py-8">
<p className="text-[--Neutrals-NeutralSlate500]">No submission data available for this employee.</p>
</div>
) : (
questionsAndAnswers.map((qa, index) => (
<div
key={index}
className={`self-stretch p-3 rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden ${qa.isLong ? 'bg-[--Neutrals-NeutralSlate100]' : 'bg-[--Neutrals-NeutralSlate100]'
}`}
>
<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">{qa.question}</div>
</div>
</div>
<div className="self-stretch px-3 py-2 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] 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">
{qa.answer}
</div>
</div>
</div>
</div>
))
)}
</div>
</>
);
};
export default Submissions;

8
src/pages/figma/ChatAIResponse.tsx
View File

@@ -153,9 +153,9 @@ const ChatAIResponse: React.FC = () => {
<div className="w-[736px] flex-1 max-w-[736px] pt-48 flex flex-col justify-start items-center gap-6"> <div className="w-[736px] flex-1 max-w-[736px] pt-48 flex flex-col justify-start items-center gap-6">
<div className="self-stretch flex flex-col justify-start items-end gap-4"> <div className="self-stretch flex flex-col justify-start items-end gap-4">
{/* User Question */} {/* User Question */}
<div className="px-4 py-3 bg-Main-BG-Gray-100 rounded-2xl inline-flex justify-start items-center gap-3 overflow-hidden"> <div className="px-4 py-3 bg-[--Neutrals-NeutralSlate100] rounded-2xl inline-flex justify-start items-center gap-3 overflow-hidden">
<div className="justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">What are the main characteristics?</div> <div className="justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">What are the main characteristics?</div>
<div className="pl-1.5 pr-2 py-0.5 bg-Text-Gray-300 rounded-2xl flex justify-start items-center gap-1.5"> <div className="pl-1.5 pr-2 py-0.5 bg-[--Neutrals-NeutralSlate300] rounded-2xl flex justify-start items-center gap-1.5">
<div className="relative"> <div className="relative">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_818_20157)"> <g clipPath="url(#clip0_818_20157)">
@@ -182,7 +182,7 @@ const ChatAIResponse: React.FC = () => {
</div> </div>
{/* Chat Input */} {/* Chat Input */}
<div className="self-stretch pl-5 pr-3 pt-5 pb-3 bg-Main-BG-Gray-50 rounded-3xl flex flex-col justify-start items-start gap-4"> <div className="self-stretch pl-5 pr-3 pt-5 pb-3 bg-[--Neutrals-NeutralSlate50] rounded-3xl flex flex-col justify-start items-start gap-4">
<div className="self-stretch justify-start text-Text-Gray-500 text-base font-normal font-['Inter'] leading-normal">Ask anything, use @ to tag staff and ask questions.</div> <div className="self-stretch justify-start text-Text-Gray-500 text-base font-normal font-['Inter'] leading-normal">Ask anything, use @ to tag staff and ask questions.</div>
<div className="self-stretch inline-flex justify-between items-center"> <div className="self-stretch inline-flex justify-between items-center">
<div className="flex justify-start items-center gap-4"> <div className="flex justify-start items-center gap-4">
@@ -204,7 +204,7 @@ const ChatAIResponse: React.FC = () => {
</svg> </svg>
</div> </div>
</div> </div>
<div className="p-2.5 bg-Text-Gray-300 rounded-[999px] flex justify-start items-center gap-2.5 overflow-hidden"> <div className="p-2.5 bg-[--Neutrals-NeutralSlate300] rounded-[999px] flex justify-start items-center gap-2.5 overflow-hidden">
<div className="relative"> <div className="relative">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 13.3346V2.66797M8 2.66797L4 6.66797M8 2.66797L12 6.66797" stroke="var(--Text-White-00, #FDFDFD)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M8 13.3346V2.66797M8 2.66797L4 6.66797M8 2.66797L12 6.66797" stroke="var(--Text-White-00, #FDFDFD)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

12
src/pages/figma/ChatLight.tsx
View File

@@ -172,7 +172,7 @@ const ChatLight: React.FC = () => {
</div> </div>
<div className="self-stretch flex flex-col justify-start items-start gap-3"> <div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="self-stretch inline-flex justify-start items-center gap-3"> <div className="self-stretch inline-flex justify-start items-center gap-3">
<div className="flex-1 h-48 px-3 py-4 bg-Main-BG-Gray-50 rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden"> <div className="flex-1 h-48 px-3 py-4 bg-[--Neutrals-NeutralSlate50] rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden">
<div className="relative"> <div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_818_19218)"> <g clipPath="url(#clip0_818_19218)">
@@ -182,7 +182,7 @@ const ChatLight: React.FC = () => {
</div> </div>
<div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div> <div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div>
</div> </div>
<div className="flex-1 h-48 px-3 py-4 bg-Main-BG-Gray-50 rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden"> <div className="flex-1 h-48 px-3 py-4 bg-[--Neutrals-NeutralSlate50] rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden">
<div className="relative"> <div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_818_19221)"> <g clipPath="url(#clip0_818_19221)">
@@ -192,7 +192,7 @@ const ChatLight: React.FC = () => {
</div> </div>
<div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div> <div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div>
</div> </div>
<div className="flex-1 h-48 px-3 py-4 bg-Main-BG-Gray-50 rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden"> <div className="flex-1 h-48 px-3 py-4 bg-[--Neutrals-NeutralSlate50] rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden">
<div className="relative"> <div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_818_19224)"> <g clipPath="url(#clip0_818_19224)">
@@ -202,7 +202,7 @@ const ChatLight: React.FC = () => {
</div> </div>
<div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div> <div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div>
</div> </div>
<div className="flex-1 h-48 px-3 py-4 bg-Main-BG-Gray-50 rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden"> <div className="flex-1 h-48 px-3 py-4 bg-[--Neutrals-NeutralSlate50] rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden">
<div className="relative"> <div className="relative">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_818_19227)"> <g clipPath="url(#clip0_818_19227)">
@@ -215,7 +215,7 @@ const ChatLight: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="self-stretch pl-5 pr-3 pt-5 pb-3 bg-Main-BG-Gray-50 rounded-3xl flex flex-col justify-start items-start gap-4"> <div className="self-stretch pl-5 pr-3 pt-5 pb-3 bg-[--Neutrals-NeutralSlate50] rounded-3xl flex flex-col justify-start items-start gap-4">
<div className="self-stretch justify-start text-Text-Gray-500 text-base font-normal font-['Inter'] leading-normal">Ask anything, use @ to tag staff and ask questions.</div> <div className="self-stretch justify-start text-Text-Gray-500 text-base font-normal font-['Inter'] leading-normal">Ask anything, use @ to tag staff and ask questions.</div>
<div className="self-stretch inline-flex justify-between items-center"> <div className="self-stretch inline-flex justify-between items-center">
<div className="flex justify-start items-center gap-4"> <div className="flex justify-start items-center gap-4">
@@ -237,7 +237,7 @@ const ChatLight: React.FC = () => {
</svg> </svg>
</div> </div>
</div> </div>
<div className="p-2.5 bg-Text-Gray-300 rounded-[999px] flex justify-start items-center gap-2.5 overflow-hidden"> <div className="p-2.5 bg-[--Neutrals-NeutralSlate300] rounded-[999px] flex justify-start items-center gap-2.5 overflow-hidden">
<div className="relative"> <div className="relative">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 13.3346V2.66797M8 2.66797L4 6.66797M8 2.66797L12 6.66797" stroke="var(--Text-White-00, #FDFDFD)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M8 13.3346V2.66797M8 2.66797L4 6.66797M8 2.66797L12 6.66797" stroke="var(--Text-White-00, #FDFDFD)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

13
src/services/secureApi.ts
View File

@@ -13,6 +13,11 @@ interface ApiResponse<T> {
message?: string; message?: string;
} }
interface GetOrgData {
org: Organization;
success: boolean;
}
interface OrgData { interface OrgData {
id: string; id: string;
name: string; name: string;
@@ -134,8 +139,8 @@ class SecureApiService {
} }
// Organization Data Methods // Organization Data Methods
async getOrgData(): Promise<OrgData> { async getOrgData(): Promise<Organization> {
const response = await this.makeRequest<{ org: OrgData }>( const response = await this.makeRequest<{ org: Organization }>(
'getOrgData', 'GET', null, true 'getOrgData', 'GET', null, true
); );
return response.org; return response.org;
@@ -333,6 +338,10 @@ class SecureApiService {
async completeOnboarding(onboardingData: any): Promise<{ success: boolean; error?: string }> { async completeOnboarding(onboardingData: any): Promise<{ success: boolean; error?: string }> {
return this.makeRequest('onboarding/complete', 'POST', onboardingData); return this.makeRequest('onboarding/complete', 'POST', onboardingData);
} }
async getOnboardingQuestions(): Promise<{ questions: any; completed: boolean; lastStep?: number }> {
return this.makeRequest('getOrgData', 'GET');
}
} }
// Export a singleton instance // Export a singleton instance

63
src/types.ts
View File

@@ -29,14 +29,16 @@ export interface OnboardingData {
yourName: string; yourName: string;
companyLogo: string; companyLogo: string;
companyName: string; companyName: string;
companySize: string;
companySize: number;
mission: string; mission: string;
missionEvolution: string; missionEvolution: string;
vision: string; vision: string;
successDefinition: string; strategicAdvantages: string;
coreValues: string; vulnerabilities: string;
industryReputation: string; scalabilityChallenges: string;
growthLimitations: string; growthLimitations: string;
leadershipStructure: string; leadershipStructure: string;
criticalPeople: string; criticalPeople: string;
leadershipGaps: string; leadershipGaps: string;
@@ -44,12 +46,14 @@ export interface OnboardingData {
leadershipDevelopment: string; leadershipDevelopment: string;
heldOntoTooLong: string; heldOntoTooLong: string;
successionConfidence: string; successionConfidence: string;
businessSystems: string; businessSystems: string;
personalDependencies: string; personalDependencies: string;
operationalFriction: string; operationalFriction: string;
workflowEfficiency: string; workflowEfficiency: string;
fragileProcesses: string;
recurringProblems: string; recurringProblems: string;
wouldFixFirst: string;
cultureDescription: string; cultureDescription: string;
livedValues: string; livedValues: string;
internalFriction: string; internalFriction: string;
@@ -57,33 +61,36 @@ export interface OnboardingData {
clearExpectations: string; clearExpectations: string;
staffFeedback: string; staffFeedback: string;
highPerformerLove: string; highPerformerLove: string;
revenuePipeline: string;
customerAcquisition: string; customerAcquisition: string;
competitiveAdvantage: string; customerAcquisitionCost: string;
customerLoss: string; customerLifetimeValue: string;
customerLoyalty: string; underutilizedChannels: string;
marketingROI: string; overspendingROI: string;
overspending: string; currentBottleneck: string;
growthAccelerator: string;
untappedOpportunities: string; monthlyBurnOverhead: string;
newProducts: string; currentRevenue: string;
innovationProcess: string; netProfitMargin: string;
uniquePosition: string; financialsUpToDate: string;
financialGrowthPlanning: string;
cashRunway: string;
underpricing: string;
uniqueOffering: string;
productStagnation: string;
industryTrends: string;
innovationAhead: string;
industryDirection: string; industryDirection: string;
disruptionThreats: string;
ideaValidation: string; avoidedDecisions: string;
idealPortfolio: string; hardestCall: string;
innovationBalance: string; energyDrain: string;
innovationPartnerships: string;
innovationMetrics: string;
businessWorries: string;
leadershipBlindSpots: string;
stressManagement: string;
regretfulDecisions: string;
leadershipGrowth: string;
leadershipStretched: string; leadershipStretched: string;
sabbaticalRisks: string; sabbaticalRisks: string;
companyLegacy: string; companyLegacy: string;
yearSuccess: string; yearSuccess: number;
} }
export interface Organization { export interface Organization {
@@ -276,7 +283,7 @@ export interface CompanyReport {
output: number; output: number;
initiative: number; initiative: number;
}[]; }[];
} }[];
// gradingBreakdown: { // gradingBreakdown: {
// departmentName: string; // departmentName: string;
// lead: string; // lead: string;