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

feat: major UI overhaul with new components and enhanced UX

Browse Source 
- 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:
Ra
2025-08-20 03:30:04 -07:00
parent 1a9e92d7bd
commit cf565df13e
47 changed files with 6654 additions and 2007 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
components/CompanyWiki/CompanyWikiEmptyStateDark.tsx Normal file
View File

@@ -0,0 +1,110 @@
import React from 'react';
interface CompanyWikiEmptyStateProps {
progress?: number;
onCompleteOnboarding?: () => void;
onInviteEmployees?: () => void;
onCopyLink?: () => void;
}
const sections = [
"Company Overview & Vision",
"Leadership & Organizational Structure",
"Operations & Execution",
"Culture & Team Health",
"Sales, Marketing & Growth",
"Financial Health & Metrics",
"Innovation & Product/Service Strategy",
"Personal Leadership & Risk"
];
export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
progress = 60,
onCompleteOnboarding,
onInviteEmployees,
onCopyLink
}) => {
return (
<div className="flex-1 self-stretch inline-flex justify-start items-center">
{/* Table of Contents */}
<div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start">
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
<div className="flex-1 justify-start text-Neutrals-NeutralSlate950 dark:text-Neutrals-NeutralSlate50 text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
</div>
<div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
{sections.map((section, index) => {
const sectionNumber = index + 1;
const isActive = sectionNumber === 1; // First section is always active in empty state
return (
<div
key={index}
className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden ${isActive ? 'bg-Main-BG-Gray-100 dark:bg-Neutrals-NeutralSlate800 shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'hover:bg-Main-BG-Gray-50 dark:hover:bg-Neutrals-NeutralSlate700'}`}
>
<div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-Brand-Orange' : 'bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate600'}`}>
<div className={`w-4 text-center justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950 dark:text-Neutrals-NeutralSlate200'}`}>
{sectionNumber}
</div>
</div>
<div className={`flex-1 justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100' : 'text-Text-Gray-500 dark:text-Neutrals-NeutralSlate400'}`}>
{section}
</div>
</div>
);
})}
</div>
</div>
{/* Main Content */}
<div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
<div className="flex-1 justify-start text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100 text-xl font-medium font-['Neue_Montreal'] leading-normal">
Company Overview & Vision
</div>
</div>
<div className="self-stretch flex-1 p-5 flex justify-center items-center">
<div className="w-[440px] flex flex-col justify-center items-center gap-8">
{/* Progress Illustration Placeholder */}
<div className="w-[280px] h-[200px] bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate700 rounded-2xl flex items-center justify-center">
<div className="text-center">
<div className="w-16 h-16 mx-auto mb-4 bg-Brand-Orange rounded-full flex items-center justify-center">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="text-white">
<path d="M16 8v8l4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="2" />
</svg>
</div>
<div className="text-Text-Gray-600 dark:text-Neutrals-NeutralSlate300 text-sm">Progress Illustration</div>
</div>
</div>
{/* Progress Content */}
<div className="self-stretch flex flex-col justify-center items-center gap-4 text-center">
<div className="text-Neutrals-NeutralSlate800 dark:text-Neutrals-NeutralSlate100 text-2xl font-semibold font-['Neue_Montreal'] leading-8">
You're {progress}% Done
</div>
<div className="self-stretch text-Text-Gray-600 dark:text-Neutrals-NeutralSlate300 text-base font-normal font-['Inter'] leading-normal">
Complete your company onboarding to unlock your company wiki and comprehensive insights about your organization.
</div>
{/* Progress Bar */}
<div className="self-stretch h-2 bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate700 rounded-full overflow-hidden">
<div
className="h-full bg-Brand-Orange rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
/>
</div>
{/* Action Button */}
<button
onClick={onCompleteOnboarding}
className="w-full px-6 py-3 bg-Brand-Orange hover:bg-orange-600 text-Neutrals-NeutralSlate0 text-base font-medium font-['Inter'] leading-normal rounded-xl transition-colors"
>
Complete Onboarding
</button>
</div>
</div>
</div>
</div>
</div>
);
};