Agents

The following is true for all agents:
The style from the figma should be preserved, the figma style takes highest priority on style, our opinions and preferences are not relevant. However, functionality is just as important, and if functionality is already implemnted, preseve it, as well as if the task says; update the functionality.

Copy the login steps style and scaffolding available in /figma-code/pages/Login-*.jsx into our current login process

Employee Forms Agent ✅ COMPLETED

✅ Copy the employee forms style and scaffolding available in /figma-code/pages/Employee-Forms-*.jsx into our current employee forms process.
✅ The current employee forms process may not be correct, we need to have it so that the employees do not require any account to fill out the forms.
✅ The company owner should just be able to invite their employees, and each employee gets their own invite.
✅ The invite will have the employee metadata attached to it, and this invite is all that is needed for verification.
✅ Upon an employee submitting their form, we must run it through our LLM via sending the form to cloud functions.
✅ When we are generating the employee report, we also need to supply the LLM with the company's onboarding questions and answers, so that the LLM has knowledge of what the company aligns with, and how the employee aligns with the company.
✅ We need to store this report in firestore, so that it may be displayed on our reports page.

Implementation Details:

Created exact Figma component library in /src/components/figma/FigmaEmployeeForms.tsx
Implemented invite-based employee questionnaire in /src/pages/EmployeeQuestionnaireNew.tsx
Updated color system in index.css and tailwind.config.js with exact Figma tokens
Configured routing for invite-based access: /employee-form/:inviteCode
Maintained cloud function integration for LLM processing
Included company context in submission for alignment analysis
See EMPLOYEE_FORMS_FIGMA_README.md for complete documentation

✅ The company report is always the report found at the top-most of the reports, and following are all employees alphabetically.
✅ You must copy the style AND information sections from /figma-code/pages/Company-Report.jsx and /figma-code/pages/Employee-Report.jsx into the application.
✅ You must dynamically fill out all of the correlating sections with truthy information from the Firestore documents.

Implementation Details:

Created comprehensive Reports.tsx component with exact three-column Figma layout
Left sidebar: Complete navigation with company logo, nav items, settings, and CTA card
Middle sidebar: Employee list with search functionality and alphabetical sorting
Main content: Dynamic report display with company report prioritized at top
Implemented all major company report sections: Weaknesses, Personnel Changes, Hiring Needs, Forward Plan, Strengths, and Grading Overview
Updated App.tsx routing to use new Reports component instead of legacy EmployeeReport
Added comprehensive CSS color system with all Figma design tokens
Maintained existing functionality: data loading, report generation, PDF export
Component shows company report by default for owners, with employee reports listed alphabetically
See /src/pages/Reports.tsx for complete implementation

✅ Currently, the design for the frames is pretty much there, however there 63 steps for the onboarding, currently only 8 of them are implmented.
✅ Be sure to implement every step listed in /figma-code/Onboarding-Step-*.jsx
✅ Then, when submitting the onboarding questions, we should make a request to submitting this data via /home/ra/auditly/src/services/secureApi.ts

Implementation Details:

Created comprehensive 63-step onboarding system in /src/data/onboardingSteps.ts
Built exact Figma component library in /src/components/onboarding/FigmaOnboardingComponents.tsx
Updated main Onboarding.tsx component to use new 63-step structure with proper Figma styling
Organized steps into 7 logical sections: Company Overview & Mission, Leadership & Organizational Structure, Operations & Execution, Culture & Team Health, Sales Marketing & Growth, Innovation & Product/Service Strategy, Personal Leadership & Risk
Implemented all step types: intro (section introductions), question (open-ended text), multiple_choice (option selection), form (company details)
Added proper API integration using secureApi.ts with onboarding/complete endpoint
Maintained exact Figma styling with progress indicators, section navigation, and responsive layouts
Enhanced CSS with all necessary Figma color tokens and variables

Currently, when the app is started, it immediately goes to a all white page, we never make it anywhere else. We need to fix this.

You are to go through all of the figmas, and then go through all of the current pages.
You will note down which pages are deprecated / unused due to incomplete implementation or redundancy.
You will create a detailed report on which pages need to be implemented still, and what we currently do not have that the figma has.