feat: major UI overhaul with new components and enhanced UX
- Add comprehensive Company Wiki feature with complete state management - CompanyWikiManager, empty states, invite modals - Implement new Chat system with enhanced layout and components - ChatLayout, ChatSidebar, MessageThread, FileUploadInput - Create modern Login and OTP verification flows - LoginNew page, OTPVerification component - Add new Employee Forms system with enhanced controller - Introduce Figma-based design components and multiple choice inputs - Add new font assets (NeueMontreal) and robot images for onboarding - Enhance existing components with improved styling and functionality - Update build configuration and dependencies - Remove deprecated ModernLogin component
This commit is contained in:
@@ -1,33 +1,69 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useOrg } from '../contexts/OrgContext';
|
||||
import { Card, Button } from '../components/UiKit';
|
||||
import { FigmaAlert } from '../components/figma/FigmaAlert';
|
||||
import { CompanyReport } from '../types';
|
||||
import RadarPerformanceChart from '../components/charts/RadarPerformanceChart';
|
||||
import { CompanyWikiManager } from '../components/CompanyWiki';
|
||||
|
||||
const CompanyWiki: React.FC = () => {
|
||||
const { org, employees, getFullCompanyReportHistory, generateCompanyWiki } = useOrg();
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [companyReport, setCompanyReport] = useState<CompanyReport | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [onboardingProgress, setOnboardingProgress] = useState(60);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const history = await getFullCompanyReportHistory();
|
||||
if (history.length) setCompanyReport(history[0]);
|
||||
if (history.length) {
|
||||
setCompanyReport(history[0]);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed loading company report history', e);
|
||||
}
|
||||
})();
|
||||
}, [getFullCompanyReportHistory]);
|
||||
|
||||
const generateReport = async () => {
|
||||
// Determine wiki state based on company data
|
||||
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 {
|
||||
const report = await generateCompanyWiki();
|
||||
setCompanyReport(report);
|
||||
setOnboardingProgress(100);
|
||||
} catch (e: any) {
|
||||
console.error(e);
|
||||
setError('Failed to generate company wiki');
|
||||
@@ -37,296 +73,22 @@ const CompanyWiki: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-[--text-primary]">Company Wiki</h1>
|
||||
<p className="text-[--text-secondary] mt-1">
|
||||
Organization overview and insights
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-[--text-primary] mb-3">Company Info</h3>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<span className="text-sm text-[--text-secondary]">Name:</span>
|
||||
<div className="font-medium text-[--text-primary]">{org?.name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-[--text-secondary]">Industry:</span>
|
||||
<div className="font-medium text-[--text-primary]">{org?.industry}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-[--text-secondary]">Size:</span>
|
||||
<div className="font-medium text-[--text-primary]">{org?.size}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-[--text-primary] mb-3">Team Stats</h3>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<span className="text-sm text-[--text-secondary]">Total Employees:</span>
|
||||
<div className="font-medium text-[--text-primary]">{employees.length}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-[--text-secondary]">Departments:</span>
|
||||
<div className="font-medium text-[--text-primary]">
|
||||
{[...new Set(employees.map(e => e.department))].length}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-[--text-secondary]">Roles:</span>
|
||||
<div className="font-medium text-[--text-primary]">
|
||||
{[...new Set(employees.map(e => e.role))].length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-[--text-primary] mb-3">Quick Actions</h3>
|
||||
<div className="space-y-3">
|
||||
<Button onClick={generateReport} disabled={isGenerating} className="w-full">
|
||||
{isGenerating ? 'Generating...' : companyReport ? 'Regenerate Company Wiki' : 'Generate Company Wiki'}
|
||||
</Button>
|
||||
{error && <FigmaAlert type="error" message={error} />}
|
||||
{!companyReport && !isGenerating && (
|
||||
<FigmaAlert type="info" message="No company wiki generated yet. Use the button above to create one." />
|
||||
)}
|
||||
<Button variant="secondary" className="w-full" disabled={!companyReport}>
|
||||
Export Data
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
{companyReport && (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold text-[--text-primary] mb-4">Executive Summary</h3>
|
||||
<p className="text-[--text-secondary] whitespace-pre-line mb-4">{companyReport.executiveSummary}</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="text-center p-4 bg-[--background-secondary] rounded-lg">
|
||||
<div className="text-2xl font-bold text-blue-500">{companyReport.overview.totalEmployees}</div>
|
||||
<div className="text-sm text-[--text-secondary]">Employees</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-[--background-secondary] rounded-lg">
|
||||
<div className="text-2xl font-bold text-green-500">{companyReport.overview?.departmentBreakdown?.length || 0}</div>
|
||||
<div className="text-sm text-[--text-secondary]">Departments</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-[--background-secondary] rounded-lg">
|
||||
<div className="text-2xl font-bold text-purple-500">{companyReport.organizationalStrengths?.length || 0}</div>
|
||||
<div className="text-sm text-[--text-secondary]">Strength Areas</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-[--background-secondary] rounded-lg">
|
||||
<div className="text-2xl font-bold text-orange-500">{companyReport.organizationalRisks?.length || 0}</div>
|
||||
<div className="text-sm text-[--text-secondary]">Risks</div>
|
||||
</div>
|
||||
</div>
|
||||
{(Array.isArray(companyReport.gradingOverview) && companyReport.gradingOverview.length > 0) && (
|
||||
<div className="mt-6 p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<RadarPerformanceChart
|
||||
title="Organizational Grading"
|
||||
data={companyReport.gradingOverview.map((g: any) => ({
|
||||
label: g.category || g.department || g.subject || 'Metric',
|
||||
value: g.value ?? g.averageScore ?? 0
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<h4 className="text-lg font-semibold text-[--text-primary] mb-3">Strengths</h4>
|
||||
<ul className="space-y-2">
|
||||
{(companyReport.organizationalStrengths || []).map((s: any, i) => <li key={i} className="text-[--text-secondary] text-sm">• {s.area || s}</li>)}
|
||||
</ul>
|
||||
</Card>
|
||||
<Card>
|
||||
<h4 className="text-lg font-semibold text-[--text-primary] mb-3">Risks</h4>
|
||||
<ul className="space-y-2">
|
||||
{(companyReport.organizationalRisks || []).map((r, i) => <li key={i} className="text-[--text-secondary] text-sm">• {r}</li>)}
|
||||
</ul>
|
||||
</Card>
|
||||
<Card>
|
||||
<h4 className="text-lg font-semibold text-[--text-primary] mb-3">Forward Plan</h4>
|
||||
<div>
|
||||
<h5 className="font-medium text-[--text-primary] text-sm mb-1">Goals</h5>
|
||||
<ul className="mb-2 list-disc list-inside text-[--text-secondary] text-sm space-y-1">
|
||||
{(companyReport.operatingPlan?.nextQuarterGoals || companyReport.forwardOperatingPlan?.quarterlyGoals || []).map((g: string, i: number) => <li key={i}>{g}</li>)}
|
||||
</ul>
|
||||
<h5 className="font-medium text-[--text-primary] text-sm mb-1">Resource Needs</h5>
|
||||
<ul className="mb-2 list-disc list-inside text-[--text-secondary] text-sm space-y-1">
|
||||
{(companyReport.operatingPlan?.resourceNeeds || companyReport.forwardOperatingPlan?.resourceNeeds || []).map((g: string, i: number) => <li key={i}>{g}</li>)}
|
||||
</ul>
|
||||
<h5 className="font-medium text-[--text-primary] text-sm mb-1">Risk Mitigation</h5>
|
||||
<ul className="list-disc list-inside text-[--text-secondary] text-sm space-y-1">
|
||||
{(companyReport.operatingPlan?.riskMitigation || companyReport.forwardOperatingPlan?.riskMitigation || []).map((g: string, i: number) => <li key={i}>{g}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="flex-1 self-stretch bg-Neutrals-NeutralSlate0 rounded-tr-3xl rounded-br-3xl inline-flex flex-col justify-start items-start">
|
||||
{error && (
|
||||
<div className="self-stretch p-4 bg-red-50 border-l-4 border-red-400 text-red-700 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Company Profile - Q&A Format from Onboarding */}
|
||||
<div className="mt-6">
|
||||
<h3 className="text-2xl font-semibold text-[--text-primary] mb-6">Company Profile</h3>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{org?.mission && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">What is your company's mission?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.mission}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.vision && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">What is your company's vision?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.vision}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.evolution && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">How has your company evolved over time?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.evolution}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.advantages && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">What are your competitive advantages?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.advantages}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.vulnerabilities && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">What are your key vulnerabilities?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.vulnerabilities}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.shortTermGoals && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">What are your short-term goals?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.shortTermGoals}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.longTermGoals && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">What are your long-term goals?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.longTermGoals}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.cultureDescription && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">How would you describe your company culture?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.cultureDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.workEnvironment && (
|
||||
<Card className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">What is your work environment like?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.workEnvironment}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{org?.additionalContext && (
|
||||
<Card className="p-4 lg:col-span-2">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
||||
<p className="text-[--text-primary] font-medium">Any additional context about your company?</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
||||
<p className="text-[--text-primary] text-sm leading-relaxed">{org.additionalContext}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{org?.description && (
|
||||
<Card className="mt-6">
|
||||
<h3 className="text-lg font-semibold text-[--text-primary] mb-3">About</h3>
|
||||
<p className="text-[--text-secondary]">{org.description}</p>
|
||||
</Card>
|
||||
)}
|
||||
<CompanyWikiManager
|
||||
initialState={wikiState}
|
||||
onboardingProgress={onboardingProgress}
|
||||
onCompleteOnboarding={handleCompleteOnboarding}
|
||||
qaItems={qaItems}
|
||||
suggestedEmployees={suggestedEmployees}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyWiki;
|
||||
export default CompanyWiki;
|
||||
Reference in New Issue
Block a user