[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.13 0.01 260); --foreground: oklch(0.95 0 0); --card: oklch(0.17 0.01 260); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.17 0.01 260); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.7 0.15 165); --primary-foreground: oklch(0.13 0.01 260); --secondary: oklch(0.22 0.01 260); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.22 0.01 260); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.7 0.15 165); --accent-foreground: oklch(0.13 0.01 260); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.28 0.01 260); --input: oklch(0.22 0.01 260); --ring: oklch(0.7 0.15 165); --chart-1: oklch(0.7 0.15 165); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.15 0.01 260); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.15 165); --sidebar-primary-foreground: oklch(0.13 0.01 260); --sidebar-accent: oklch(0.22 0.01 260); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.28 0.01 260); --sidebar-ring: oklch(0.7 0.15 165); } .dark { --background: oklch(0.13 0.01 260); --foreground: oklch(0.95 0 0); --card: oklch(0.17 0.01 260); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.17 0.01 260); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.7 0.15 165); --primary-foreground: oklch(0.13 0.01 260); --secondary: oklch(0.22 0.01 260); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.22 0.01 260); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.7 0.15 165); --accent-foreground: oklch(0.13 0.01 260); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.28 0.01 260); --input: oklch(0.22 0.01 260); --ring: oklch(0.7 0.15 165); --chart-1: oklch(0.7 0.15 165); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.15 0.01 260); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.15 165); --sidebar-primary-foreground: oklch(0.13 0.01 260); --sidebar-accent: oklch(0.22 0.01 260); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.28 0.01 260); --sidebar-ring: oklch(0.7 0.15 165); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "ai": "6.0.71", "@ai-sdk/react": "3.0.72" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'HR Pulse - Case Management', description: 'HR outsourcing service case management tool', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescript:file="lib/data.ts" isMerged="true" import type { Case, Client, Comment, ComplianceDeadline, KnowledgeArticle } from "./types" export const initialCases: Case[] = [ { id: "HR-001", title: "Termination process review", client: "Acme Corp", status: "open", priority: "high", created: "2h ago", description: "Employee performance issues requiring termination review and documentation." }, { id: "HR-002", title: "Policy handbook update", client: "TechStart Inc", status: "in-progress", priority: "medium", created: "1d ago", description: "Annual review and update of company policy handbook." }, { id: "HR-003", title: "Employee complaint investigation", client: "Acme Corp", status: "open", priority: "high", created: "3h ago", description: "Formal complaint filed regarding workplace conduct." }, { id: "HR-004", title: "Benefits enrollment question", client: "Global Services", status: "resolved", priority: "low", created: "2d ago", description: "Questions about open enrollment deadlines and options." }, { id: "HR-005", title: "ADA accommodation request", client: "TechStart Inc", status: "in-progress", priority: "high", created: "5h ago", description: "Request for reasonable accommodation review." }, { id: "HR-006", title: "FMLA leave documentation", client: "BuildRight LLC", status: "open", priority: "medium", created: "1d ago", description: "Employee requesting FMLA leave for medical reasons." }, ] export const initialComments: Comment[] = [ { id: "c1", caseId: "HR-001", author: "Sarah Chen", content: "Reviewed documentation. Recommending 30-day PIP before proceeding.", created: "1h ago" }, { id: "c2", caseId: "HR-001", author: "Mike Johnson", content: "PIP template sent to client for review.", created: "30m ago" }, { id: "c3", caseId: "HR-003", author: "Sarah Chen", content: "Initial intake call scheduled with complainant for tomorrow.", created: "2h ago" }, ] export const clients: Client[] = [ { id: "c1", name: "Acme Corp", contactEmail: "hr@acme.com", openCases: 2, industry: "Manufacturing" }, { id: "c2", name: "TechStart Inc", contactEmail: "people@techstart.io", openCases: 2, industry: "Technology" }, { id: "c3", name: "Global Services", contactEmail: "hr@globalservices.com", openCases: 0, industry: "Consulting" }, { id: "c4", name: "BuildRight LLC", contactEmail: "admin@buildright.com", openCases: 1, industry: "Construction" }, ] export const complianceDeadlines: ComplianceDeadline[] = [ { id: "d1", title: "EEO-1 Filing", client: "Acme Corp", dueDate: "2026-03-31", type: "filing", status: "upcoming" }, { id: "d2", title: "OSHA 300A Posting", client: "BuildRight LLC", dueDate: "2026-02-01", type: "filing", status: "overdue" }, { id: "d3", title: "I-9 Audit", client: "TechStart Inc", dueDate: "2026-02-15", type: "audit", status: "due-soon" }, { id: "d4", title: "Benefits Renewal", client: "Global Services", dueDate: "2026-04-01", type: "renewal", status: "upcoming" }, { id: "d5", title: "Harassment Training", client: "Acme Corp", dueDate: "2026-02-28", type: "training", status: "due-soon" }, { id: "d6", title: "Policy Review", client: "TechStart Inc", dueDate: "2026-03-15", type: "review", status: "upcoming" }, { id: "d7", title: "Workers Comp Audit", client: "BuildRight LLC", dueDate: "2026-02-20", type: "audit", status: "due-soon" }, ] export const knowledgeArticles: KnowledgeArticle[] = [ // Compliance Articles { id: "k1", title: "FMLA Leave Guidelines", category: "Compliance", content: "Comprehensive guide to administering FMLA leave including eligibility, documentation requirements, and return-to-work procedures.", tags: ["FMLA", "leave", "compliance"], lastUpdated: "2026-01-15" }, { id: "k3", title: "ADA Accommodation Process", category: "Compliance", content: "Guide to the interactive process for handling ADA accommodation requests.", tags: ["ADA", "accommodation", "compliance"], lastUpdated: "2026-01-10" }, // Templates { id: "k2", title: "Termination Checklist", category: "Templates", content: "Step-by-step checklist for handling employee terminations including documentation, final pay, benefits, and exit procedures.", tags: ["termination", "checklist", "offboarding"], lastUpdated: "2026-01-20" }, { id: "k5", title: "Offer Letter Template", category: "Templates", content: "Standard offer letter template with customizable sections for compensation, benefits, and terms.", tags: ["offer letter", "template", "hiring"], lastUpdated: "2026-01-05" }, { id: "k6", title: "PIP Template", category: "Templates", content: "Performance Improvement Plan template with goal-setting framework and documentation requirements.", tags: ["PIP", "performance", "template"], lastUpdated: "2025-12-15" }, // Guides { id: "k4", title: "Investigation Best Practices", category: "Guides", content: "Best practices for conducting workplace investigations including interviewing, documentation, and confidentiality.", tags: ["investigation", "complaints", "documentation"], lastUpdated: "2025-12-20" }, // === BOILERPLATE HR POLICIES (Starter Pack) === // Must-Have Legal Compliance Policies { id: "bp1", title: "Anti-Discrimination & Harassment Policy", category: "Policies", content: `ANTI-DISCRIMINATION & HARASSMENT POLICY PURPOSE This policy establishes [Company Name]'s commitment to providing a workplace free from discrimination and harassment based on protected characteristics. SCOPE This policy applies to all employees, contractors, vendors, and visitors in all work-related settings. PROTECTED CHARACTERISTICS Discrimination and harassment based on the following characteristics is prohibited: - Race, color, national origin, ancestry - Religion, creed - Sex, gender, gender identity, gender expression - Sexual orientation - Age (40 and over) - Disability (physical or mental) - Genetic information - Marital status - Pregnancy, childbirth, or related medical conditions - Veteran or military status - Any other characteristic protected by applicable law PROHIBITED CONDUCT Harassment includes unwelcome conduct that: - Has the purpose or effect of creating an intimidating, hostile, or offensive work environment - Has the purpose or effect of unreasonably interfering with an individual's work performance - Otherwise adversely affects an individual's employment opportunities Examples include but are not limited to: - Offensive jokes, slurs, epithets, or name-calling - Physical assaults or threats - Intimidation, ridicule, or mockery - Insults or put-downs - Offensive objects or pictures - Interference with work performance SEXUAL HARASSMENT Sexual harassment includes unwelcome sexual advances, requests for sexual favors, and other verbal or physical conduct of a sexual nature when: - Submission is made explicitly or implicitly a term or condition of employment - Submission or rejection is used as a basis for employment decisions - Such conduct unreasonably interferes with work performance or creates an intimidating, hostile, or offensive work environment REPORTING PROCEDURES Employees who experience or witness discrimination or harassment should report it immediately to: - Their direct supervisor (unless involved in the complaint) - Human Resources - Any member of management - Anonymous reporting hotline: [Phone/Email] INVESTIGATION PROCESS All complaints will be investigated promptly, thoroughly, and impartially. Investigations will be conducted with appropriate confidentiality to the extent possible. NO RETALIATION Retaliation against anyone who reports discrimination or harassment, or who participates in an investigation, is strictly prohibited and will result in disciplinary action up to and including termination. CONSEQUENCES Employees found to have engaged in discrimination, harassment, or retaliation will be subject to disciplinary action up to and including termination. ACKNOWLEDGMENT I have received and read this Anti-Discrimination & Harassment Policy. I understand my obligations and agree to comply with its terms. Employee Signature: _________________ Date: _______ Printed Name: _________________`, tags: ["discrimination", "harassment", "EEO", "policy", "legal"], lastUpdated: "2026-02-01" }, { id: "bp2", title: "Equal Employment Opportunity (EEO) Statement", category: "Policies", content: `EQUAL EMPLOYMENT OPPORTUNITY STATEMENT [Company Name] is an equal opportunity employer. We are committed to providing equal employment opportunities to all employees and applicants without regard to race, color, religion, sex, national origin, age, disability, genetic information, veteran status, sexual orientation, gender identity, or any other characteristic protected by applicable federal, state, or local law. This commitment applies to all terms and conditions of employment, including but not limited to: - Recruitment and hiring - Placement and promotion - Training and development - Compensation and benefits - Transfer and reassignment - Discipline and termination - Social and recreational programs AFFIRMATIVE ACTION [Company Name] takes affirmative action to ensure that applicants and employees are treated without regard to their protected characteristics. We actively seek to recruit, hire, train, and promote qualified individuals from all backgrounds. REASONABLE ACCOMMODATIONS [Company Name] will provide reasonable accommodations to qualified individuals with disabilities and to employees with sincerely held religious beliefs, unless doing so would cause undue hardship to the company. COMPLIANCE This policy complies with all applicable federal laws, including: - Title VII of the Civil Rights Act of 1964 - Age Discrimination in Employment Act (ADEA) - Americans with Disabilities Act (ADA) - Genetic Information Nondiscrimination Act (GINA) - Equal Pay Act - Pregnancy Discrimination Act As well as applicable state and local fair employment laws. RESPONSIBILITY All employees share responsibility for maintaining a workplace free from discrimination. Managers and supervisors have a particular responsibility to ensure this policy is enforced and to report any violations immediately. Questions about this policy should be directed to Human Resources.`, tags: ["EEO", "equal opportunity", "compliance", "hiring", "legal"], lastUpdated: "2026-02-01" }, { id: "bp3", title: "At-Will Employment Acknowledgment", category: "Policies", content: `AT-WILL EMPLOYMENT ACKNOWLEDGMENT EMPLOYMENT RELATIONSHIP Your employment with [Company Name] is "at-will." This means that either you or the Company may terminate the employment relationship at any time, for any reason, with or without cause, and with or without notice. NO CONTRACT OF EMPLOYMENT This at-will employment relationship exists regardless of any other written or oral statements or representations to the contrary. Nothing in this handbook, any document, or any verbal statement shall be interpreted to be in conflict with or to eliminate or modify in any way the at-will employment status of Company employees. MODIFICATION OF AT-WILL STATUS The at-will employment relationship cannot be altered except by a written agreement signed by the employee and the President/CEO of [Company Name]. No manager, supervisor, or employee of the Company has any authority to enter into an agreement for employment for any specified period of time or to make an agreement for employment on terms other than at-will. POLICIES ARE NOT A CONTRACT The policies, procedures, and benefits described in the employee handbook are not conditions of employment. [Company Name] reserves the right to modify, revoke, suspend, terminate, or change any or all policies, procedures, and benefits, in whole or in part, at any time, with or without notice. ACKNOWLEDGMENT I acknowledge that: 1. My employment is at-will 2. Either I or the Company can terminate my employment at any time, for any reason 3. No oral or written statements or representations can change my at-will status unless signed by the President/CEO 4. This acknowledgment supersedes any prior agreements regarding my employment status Employee Signature: _________________ Date: _______ Printed Name: _________________`, tags: ["at-will", "employment", "acknowledgment", "legal", "onboarding"], lastUpdated: "2026-02-01" }, { id: "bp4", title: "FMLA & Leave of Absence Policy", category: "Policies", content: `FAMILY AND MEDICAL LEAVE POLICY ELIGIBILITY Employees are eligible for FMLA leave if they: - Have worked for the company for at least 12 months - Have worked at least 1,250 hours during the 12 months prior to the leave - Work at a location where the company employs 50+ employees within 75 miles COVERED REASONS FOR LEAVE Eligible employees may take up to 12 weeks of unpaid leave per 12-month period for: 1. Birth of a child and bonding with the newborn 2. Placement of a child for adoption or foster care 3. Care for a spouse, child, or parent with a serious health condition 4. Employee's own serious health condition that makes them unable to perform essential job functions 5. Qualifying exigency arising from a family member's military service Military caregiver leave: Up to 26 weeks to care for a covered servicemember with a serious injury or illness. SERIOUS HEALTH CONDITION A serious health condition means an illness, injury, impairment, or physical or mental condition that involves: - Inpatient care in a hospital, hospice, or residential medical facility - Continuing treatment by a healthcare provider NOTICE REQUIREMENTS - Foreseeable leave: 30 days advance notice when possible - Unforeseeable leave: As soon as practicable (generally same or next business day) CERTIFICATION The company may require medical certification for leave due to a serious health condition. Certification forms will be provided upon request. INTERMITTENT LEAVE When medically necessary, leave may be taken intermittently or on a reduced schedule. Employees must make reasonable efforts to schedule treatment so as not to unduly disrupt operations. BENEFITS DURING LEAVE - Health insurance continues under the same terms as if actively employed - Employee must continue to pay their share of premiums - Other benefits accrue according to plan terms JOB PROTECTION Upon return from FMLA leave, employees will be restored to: - The same position, or - An equivalent position with equivalent pay, benefits, and terms of employment STATE LEAVE LAWS Additional leave may be available under applicable state laws. Contact HR for information about your state's requirements.`, tags: ["FMLA", "leave", "medical", "family", "compliance", "policy"], lastUpdated: "2026-02-01" }, { id: "bp5", title: "Workers Compensation & Workplace Safety", category: "Policies", content: `WORKERS' COMPENSATION & WORKPLACE SAFETY POLICY WORKERS' COMPENSATION [Company Name] provides workers' compensation insurance coverage for all employees. This coverage provides benefits for work-related injuries or illnesses including: - Medical expenses - Disability benefits - Rehabilitation services - Death benefits for dependents REPORTING INJURIES All work-related injuries or illnesses must be reported immediately to: 1. Your supervisor 2. Human Resources Even minor injuries should be reported. Prompt reporting ensures timely medical treatment and protects your rights under workers' compensation laws. SEEKING MEDICAL TREATMENT - For emergencies: Call 911 or go to the nearest emergency room - For non-emergencies: Contact HR for approved medical providers - Inform the healthcare provider that this is a work-related injury RETURN TO WORK We are committed to returning injured employees to work as soon as medically appropriate. Modified duty may be available based on medical restrictions. WORKPLACE SAFETY PROGRAM [Company Name] is committed to providing a safe and healthy work environment. Our safety program includes: EMPLOYEE RESPONSIBILITIES - Follow all safety rules and procedures - Use required personal protective equipment (PPE) - Report unsafe conditions immediately - Report all injuries and near-misses - Participate in safety training - Do not operate equipment unless trained and authorized MANAGEMENT RESPONSIBILITIES - Provide a safe work environment - Provide necessary safety training and equipment - Investigate accidents and near-misses - Correct unsafe conditions promptly - Enforce safety rules consistently HAZARD COMMUNICATION - Safety Data Sheets (SDS) are maintained for all hazardous chemicals - All containers are properly labeled - Employees are trained on hazardous materials they may encounter EMERGENCY PROCEDURES - Know the location of emergency exits, fire extinguishers, and first aid kits - Follow evacuation procedures during emergencies - Report to designated assembly areas during evacuations OSHA COMPLIANCE [Company Name] complies with all OSHA regulations. The OSHA poster is displayed in [location]. Employees may report safety concerns to OSHA without fear of retaliation.`, tags: ["workers comp", "safety", "OSHA", "injury", "compliance", "policy"], lastUpdated: "2026-02-01" }, { id: "bp6", title: "Confidentiality & Data Privacy Policy", category: "Policies", content: `CONFIDENTIALITY & DATA PRIVACY POLICY PURPOSE This policy protects the confidential information of [Company Name], its employees, clients, and business partners. DEFINITION OF CONFIDENTIAL INFORMATION Confidential information includes but is not limited to: - Trade secrets and proprietary information - Business plans, strategies, and financial data - Customer and client information - Employee personal information - Pricing and contract terms - Product development and research - Software, code, and technical specifications - Vendor and supplier information EMPLOYEE OBLIGATIONS All employees must: 1. Protect confidential information from unauthorized disclosure 2. Use confidential information only for legitimate business purposes 3. Not share confidential information with unauthorized persons (inside or outside the company) 4. Return all confidential materials upon termination 5. Report any suspected breaches immediately DATA PRIVACY [Company Name] collects and maintains personal information about employees for legitimate business purposes including: - Payroll and benefits administration - Performance management - Legal and regulatory compliance - Emergency contact purposes EMPLOYEE DATA RIGHTS Employees have the right to: - Know what personal information is collected - Access their personal information - Request corrections to inaccurate information - Understand how their information is used INFORMATION SECURITY - Use strong, unique passwords and change them regularly - Lock your computer when away from your desk - Do not share login credentials - Be vigilant about phishing and social engineering attempts - Report lost or stolen devices immediately SOCIAL MEDIA Do not share confidential company information on social media. When posting about work-related topics, clearly state that opinions are your own. VIOLATIONS Violations of this policy may result in disciplinary action up to and including termination, and may also result in civil or criminal liability. POST-EMPLOYMENT OBLIGATIONS Confidentiality obligations continue after employment ends. Former employees may not use or disclose confidential information learned during employment.`, tags: ["confidentiality", "data privacy", "security", "policy", "legal"], lastUpdated: "2026-02-01" }, // Operational Essentials { id: "bp7", title: "PTO & Sick Leave Policy", category: "Policies", content: `PAID TIME OFF (PTO) & SICK LEAVE POLICY PTO ACCRUAL Full-time employees accrue PTO as follows: Years of Service | Annual PTO | Accrual Rate 0-2 years | 15 days | 1.25 days/month 3-5 years | 20 days | 1.67 days/month 6+ years | 25 days | 2.08 days/month Part-time employees accrue PTO on a prorated basis. PTO USAGE - PTO may be used for vacation, personal time, or any reason - PTO requests should be submitted [X] days in advance when possible - Manager approval is required - PTO may be taken in increments of [half-day/full-day] PTO CARRYOVER - Maximum carryover: [X] days per year - Use-it-or-lose-it applies to days exceeding the maximum - Carried-over days must be used by [March 31/June 30] SICK LEAVE [Adjust based on state requirements] Sick leave may be used for: - Employee's own illness or medical appointments - Care for a sick family member - Medical appointments for family members - Reasons covered by applicable state/local sick leave laws Accrual: [1 hour for every 30 hours worked, or X days per year] Maximum balance: [X] days Carryover: [Yes/No, with limits] REQUESTING TIME OFF 1. Submit request through [HR system/manager] 2. Include dates and type of leave 3. Await approval before confirming personal plans UNSCHEDULED ABSENCES - Notify your supervisor as soon as possible (before your shift when possible) - Provide expected duration of absence - Follow call-in procedures consistently HOLIDAYS [Company Name] observes the following paid holidays: - New Year's Day - Martin Luther King Jr. Day - Presidents' Day - Memorial Day - Independence Day - Labor Day - Thanksgiving Day - Day after Thanksgiving - Christmas Day When a holiday falls on a weekend, it will be observed on the nearest weekday. PTO PAYOUT Upon termination, unused PTO will be paid out according to [state law/company policy].`, tags: ["PTO", "vacation", "sick leave", "time off", "policy"], lastUpdated: "2026-02-01" }, { id: "bp8", title: "Remote Work & Hybrid Policy", category: "Policies", content: `REMOTE WORK & HYBRID POLICY PURPOSE This policy establishes guidelines for employees who work remotely, whether full-time or in a hybrid arrangement. ELIGIBILITY Remote work eligibility is determined by: - Job duties and responsibilities - Performance history - Ability to work independently - Manager and department approval - Business needs WORK ARRANGEMENTS 1. Full Remote: Employee works from home 100% of the time 2. Hybrid: Employee works from home [X] days per week 3. Flexible: Employee has flexibility to work remotely as approved EMPLOYEE RESPONSIBILITIES Remote employees must: - Maintain regular work hours and be available during core hours [9am-3pm] - Respond promptly to communications - Attend required meetings (virtual or in-person) - Maintain productivity and meet performance expectations - Ensure a safe, professional home workspace - Protect confidential information - Comply with all company policies WORKSPACE REQUIREMENTS - Dedicated, private workspace - Reliable high-speed internet connection - Appropriate lighting for video calls - Professional background for video meetings - Ergonomic setup recommended EQUIPMENT - Company-provided: [laptop, monitor, etc.] - Employee-provided: [internet, desk, chair, etc.] - Equipment stipend: [$X per month/year for home office expenses] COMMUNICATION EXPECTATIONS - Be available on [Slack/Teams/email] during work hours - Camera on for team meetings unless otherwise specified - Respond to messages within [2-4 hours] - Update calendar with availability and work location SECURITY REQUIREMENTS - Use company VPN when accessing company systems - Keep work devices secure and updated - Do not use public WiFi for sensitive work - Follow all data security policies IN-OFFICE REQUIREMENTS Hybrid employees are expected in the office: - [X] days per week minimum - For all-hands meetings and team events - As requested by manager for specific projects MODIFICATION OR TERMINATION Remote work arrangements may be modified or terminated: - Based on business needs - Due to performance issues - At the company's discretion with reasonable notice`, tags: ["remote work", "hybrid", "WFH", "flexible", "policy"], lastUpdated: "2026-02-01" }, { id: "bp9", title: "Code of Conduct", category: "Policies", content: `CODE OF CONDUCT INTRODUCTION This Code of Conduct outlines the standards of behavior expected of all employees at [Company Name]. Our success depends on maintaining the highest ethical standards in all our business dealings. CORE VALUES - Integrity: Act honestly and ethically in all situations - Respect: Treat everyone with dignity and professionalism - Excellence: Strive for quality in all work - Accountability: Take responsibility for actions and decisions - Collaboration: Work together to achieve common goals PROFESSIONAL BEHAVIOR All employees are expected to: - Report to work on time and ready to perform duties - Dress appropriately for your role and work environment - Communicate professionally with colleagues, clients, and vendors - Maintain a clean and organized workspace - Follow all company policies and procedures CONFLICTS OF INTEREST Employees must avoid situations where personal interests conflict with company interests. This includes: - Outside employment that interferes with job duties - Personal relationships that affect business decisions - Financial interests in competitors or vendors - Using company resources for personal gain Disclose potential conflicts to your manager or HR immediately. GIFTS AND ENTERTAINMENT - Employees may accept modest gifts (under $[50-100]) from vendors/clients - Cash or cash equivalents are never acceptable - All gifts over $[X] must be reported to HR - Use good judgment—if it feels inappropriate, decline COMPANY PROPERTY AND RESOURCES - Use company resources (equipment, supplies, time) for business purposes - Limited personal use of technology is permitted if it doesn't interfere with work - Protect company property from damage, theft, or misuse - Return all company property upon termination SOCIAL MEDIA When discussing work-related topics on social media: - Be respectful and professional - Do not share confidential information - Clearly state that opinions are your own - Do not speak on behalf of the company unless authorized SUBSTANCE ABUSE - Employees must report to work fit for duty - Use, possession, or sale of illegal drugs is prohibited - Alcohol consumption during work hours requires manager approval - Prescription medications that impair judgment must be reported to HR REPORTING VIOLATIONS Report suspected violations through: - Your supervisor - Human Resources - Anonymous ethics hotline: [phone/email] No retaliation will be taken against anyone who reports concerns in good faith. CONSEQUENCES Violations of this Code may result in disciplinary action up to and including termination.`, tags: ["code of conduct", "ethics", "behavior", "policy"], lastUpdated: "2026-02-01" }, { id: "bp10", title: "Performance Review Process", category: "Guides", content: `PERFORMANCE REVIEW PROCESS OVERVIEW [Company Name] conducts regular performance reviews to provide feedback, recognize achievements, identify development opportunities, and align individual goals with company objectives. REVIEW CYCLE - Annual Reviews: [January/Anniversary date] - Mid-Year Check-ins: [July/6 months after hire] - Ongoing: Regular 1:1 meetings and feedback REVIEW COMPONENTS 1. SELF-ASSESSMENT Employees complete a self-assessment covering: - Key accomplishments from the review period - Goals achieved and progress made - Challenges encountered - Areas for development - Goals for the upcoming period 2. MANAGER ASSESSMENT Managers evaluate employees on: - Job performance and quality of work - Achievement of goals and objectives - Core competencies (communication, teamwork, problem-solving) - Adherence to company values - Areas of strength and development 3. 360 FEEDBACK (Optional) For certain roles, feedback may be gathered from: - Peers - Direct reports - Cross-functional partners - Clients/customers RATING SCALE 5 - Exceptional: Consistently exceeds expectations 4 - Exceeds Expectations: Frequently exceeds expectations 3 - Meets Expectations: Consistently meets expectations 2 - Needs Improvement: Sometimes meets expectations 1 - Unsatisfactory: Rarely meets expectations GOAL SETTING Goals should be SMART: - Specific: Clear and well-defined - Measurable: Quantifiable outcomes - Achievable: Realistic and attainable - Relevant: Aligned with team/company goals - Time-bound: Clear deadlines DEVELOPMENT PLANNING Each review includes a development plan addressing: - Skills to develop - Training or resources needed - Career aspirations - Timeline for development activities COMPENSATION DECISIONS Performance ratings inform but do not guarantee: - Merit increases - Bonus eligibility - Promotion considerations Final compensation decisions consider individual performance, market data, budget, and internal equity. DOCUMENTATION All performance reviews are documented in [HR system] and retained in the employee's personnel file. DISAGREEMENTS Employees who disagree with their review may: - Discuss concerns with their manager - Submit a written response to be attached to the review - Escalate to HR if concerns are not resolved`, tags: ["performance", "review", "feedback", "goals", "guide"], lastUpdated: "2026-02-01" }, { id: "bp11", title: "Expense Reimbursement Policy", category: "Policies", content: `EXPENSE REIMBURSEMENT POLICY PURPOSE This policy provides guidelines for reimbursement of legitimate business expenses incurred by employees. GENERAL PRINCIPLES - Expenses must be reasonable, necessary, and business-related - Pre-approval is required for expenses over $[X] - Original receipts are required for all expenses over $[25] - Expenses must be submitted within [30] days TRAVEL EXPENSES AIR TRAVEL - Book economy class for domestic flights - Business class may be approved for international flights over [X] hours - Book at least [14] days in advance when possible - Use preferred corporate travel vendors when available LODGING - Use standard hotel rooms at moderate prices - Maximum nightly rate: $[X] (varies by city) - Personal expenses (minibar, movies) are not reimbursable GROUND TRANSPORTATION - Use public transportation, rideshare, or rental cars as appropriate - Rental cars require pre-approval; choose economy or compact - Mileage reimbursement for personal vehicle: $[IRS rate] per mile - Parking and tolls are reimbursable with receipts MEALS - Per diem: $[X] per day, or - Actual expenses with receipts (reasonable amounts) - Alcohol may be reimbursed only when entertaining clients (with approval) BUSINESS MEALS AND ENTERTAINMENT - Pre-approval required for expenses over $[X] - Document business purpose and attendees - Tips should not exceed 20% - Spouses/partners are generally not reimbursable TECHNOLOGY AND SUPPLIES - Office supplies: Use company-approved vendors - Software: Pre-approval required; use company-approved tools - Mobile devices: Per company mobile device policy NON-REIMBURSABLE EXPENSES - Personal entertainment - Traffic tickets or parking violations - Personal travel expenses - Upgrades without business justification - Expenses without proper documentation SUBMISSION PROCESS 1. Complete expense report in [system] 2. Attach original receipts 3. Provide business justification 4. Submit to manager for approval 5. Reimbursement processed within [X] days VIOLATIONS Falsifying expense reports is a serious violation that may result in: - Denial of reimbursement - Repayment of improper expenses - Disciplinary action up to termination - Legal action if warranted`, tags: ["expenses", "reimbursement", "travel", "policy"], lastUpdated: "2026-02-01" }, { id: "bp12", title: "IP Assignment & Invention Agreement", category: "Policies", content: `INTELLECTUAL PROPERTY ASSIGNMENT & INVENTION AGREEMENT This agreement is between [Company Name] ("Company") and the undersigned employee ("Employee"). 1. DEFINITIONS "Inventions" means all discoveries, developments, concepts, designs, ideas, know-how, improvements, inventions, trade secrets, and original works of authorship, whether or not patentable or registrable under copyright or similar laws. "Company Inventions" means Inventions that: (a) Are developed using Company equipment, supplies, facilities, or trade secret information; (b) Result from work performed for the Company; (c) Relate to the Company's current or anticipated business, research, or development; or (d) Are developed during work hours. 2. ASSIGNMENT OF INVENTIONS Employee hereby assigns and transfers to Company all right, title, and interest in and to any Company Inventions, including all intellectual property rights therein. Employee agrees to: - Promptly disclose all Company Inventions to the Company - Execute all documents necessary to perfect the Company's ownership - Assist the Company in obtaining patents or other protections - Maintain adequate records of all Company Inventions 3. PRIOR INVENTIONS Employee has listed on Exhibit A all Inventions owned by Employee prior to employment that Employee wishes to exclude from this Agreement. If no inventions are listed, Employee represents that there are none. 4. WORKS MADE FOR HIRE All original works of authorship created within the scope of employment are "works made for hire" as defined by copyright law and are owned by the Company. 5. CONFIDENTIALITY Employee agrees to maintain the confidentiality of all Company Inventions and trade secrets, both during and after employment. 6. NO CONFLICTING OBLIGATIONS Employee represents that: - This Agreement does not conflict with any prior agreements - Employee will not use or disclose any third-party confidential information - Employee has not brought any third-party materials to the Company 7. RETURN OF MATERIALS Upon termination, Employee will return all Company materials, documents, and property, including all embodiments of Company Inventions. 8. SURVIVAL The obligations under this Agreement survive the termination of employment. 9. STATE LAW EXCEPTIONS [Include applicable state-specific carve-outs, e.g., California Labor Code Section 2870] ACKNOWLEDGMENT Employee Signature: _________________ Date: _______ Printed Name: _________________ EXHIBIT A - PRIOR INVENTIONS [List any prior inventions to be excluded, or write "None"]`, tags: ["IP", "intellectual property", "invention", "agreement", "legal"], lastUpdated: "2026-02-01" }, ] [V0_FILE]typescript:file="app/api/chat/route.ts" isMerged="true" import { consumeStream, convertToModelMessages, streamText, UIMessage } from "ai" export const maxDuration = 30 const HR_SYSTEM_PROMPT = `You are an expert HR assistant for HR Pulse, an HR outsourcing service platform. You help HR professionals with: - Drafting HR communications (offer letters, PIPs, termination letters, policy updates) - Answering HR compliance questions (FMLA, ADA, FLSA, EEO, OSHA) - Employee relations guidance - Best practices for investigations and documentation - Benefits administration questions - Workplace policy recommendations KNOWLEDGE BASE REFERENCE: You have access to a comprehensive library of boilerplate HR policies that serve as a starting point for any organization. When users ask about policies, reference these standard templates: MUST-HAVE LEGAL COMPLIANCE POLICIES: 1. Anti-Discrimination & Harassment Policy - Covers protected characteristics, prohibited conduct, sexual harassment definitions, reporting procedures, investigation process, and no-retaliation clause 2. Equal Employment Opportunity (EEO) Statement - Commitment to equal opportunity in all employment decisions, affirmative action, reasonable accommodations 3. At-Will Employment Acknowledgment - Establishes at-will relationship, clarifies no contract exists, requires signature 4. FMLA & Leave of Absence Policy - Eligibility (12 months, 1250 hours), covered reasons, serious health condition definition, notice requirements, job protection 5. Workers Compensation & Workplace Safety - Reporting procedures, OSHA compliance, employee and management safety responsibilities 6. Confidentiality & Data Privacy Policy - Definition of confidential information, employee obligations, data privacy rights, post-employment obligations OPERATIONAL ESSENTIALS: 7. PTO & Sick Leave Policy - Accrual schedules by tenure, usage rules, carryover limits, sick leave (adjust for state requirements), holidays 8. Remote Work & Hybrid Policy - Eligibility criteria, workspace requirements, equipment, communication expectations, security 9. Code of Conduct - Core values, professional behavior, conflicts of interest, gifts policy, substance abuse 10. Performance Review Process - Annual/mid-year cycle, self-assessment, manager assessment, SMART goals, rating scale 11. Expense Reimbursement Policy - Travel (air, lodging, ground, meals), submission process, non-reimbursable items 12. IP Assignment & Invention Agreement - Critical for tech startups, assigns work product to company, prior inventions disclosure RECOMMENDED RESOURCES FOR CLIENTS: - SHRM Employee Handbook Builder ($420/year) - State-specific, legally vetted by Jackson Lewis - SixFifty by Wilson Sonsini - Attorney-built handbook generator - Gusto/Rippling/Justworks - Built-in handbook tools with payroll integration - Free: SHRM Sample Employee Handbook (Word template) Be professional, concise, and always remind users to consult legal counsel for specific legal advice. When drafting documents, ask clarifying questions if needed. Reference the Knowledge Base policies when applicable and offer to provide the full policy text when relevant.` export async function POST(req: Request) { const { messages, systemPrompt, model }: { messages: UIMessage[]; systemPrompt?: string; model?: string } = await req.json() const result = streamText({ model: model || "anthropic/claude-opus-4-5", system: systemPrompt || HR_SYSTEM_PROMPT, messages: await convertToModelMessages(messages), abortSignal: req.signal, }) return result.toUIMessageStreamResponse({ originalMessages: messages, consumeSseStream: consumeStream, }) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { Button } from "@/components/ui/button" import { Menu, X, FileText, Users, Calendar, BookOpen, Bot, Settings, ChevronRight, Info } from "lucide-react" const navItems = [ { label: "Cases", href: "/", icon: FileText }, { label: "Clients", href: "/clients", icon: Users }, { label: "Calendar", href: "/calendar", icon: Calendar }, { label: "Knowledge", href: "/knowledge", icon: BookOpen }, { label: "AI Assistant", href: "/assistant", icon: Bot }, { label: "Settings", href: "/settings", icon: Settings }, ] const pageTitles: Record = { "/": "Cases", "/clients": "Clients", "/calendar": "Compliance Calendar", "/knowledge": "Knowledge Base", "/assistant": "AI Assistant", "/settings": "Settings", "/about": "About", } export function Header() { const [menuOpen, setMenuOpen] = useState(false) const pathname = usePathname() const currentPage = pageTitles[pathname] return ( <>

HR Pulse About {currentPage && pathname !== "/" && ( <> {currentPage} )}

{/* Full Screen Mobile Menu */} {menuOpen && (

HR Pulse

{navItems.map((item) => { const Icon = item.icon const isActive = pathname === item.href return ( setMenuOpen(false)} className={`flex h-12 items-center gap-3 rounded-lg px-4 text-left text-base transition-colors ${ isActive ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-secondary hover:text-foreground" }`} > {item.label} ) })}

)} ) } [V0_FILE]typescript:file="lib/types.ts" isMerged="true" export type CaseStatus = "open" | "in-progress" | "resolved" export type Priority = "high" | "medium" | "low" export interface Case { id: string title: string client: string status: CaseStatus priority: Priority created: string description?: string } export interface Comment { id: string caseId: string author: string content: string created: string } export interface Client { id: string name: string contactEmail: string openCases: number industry: string } export interface ComplianceDeadline { id: string title: string client: string dueDate: string type: "filing" | "audit" | "renewal" | "review" | "training" status: "upcoming" | "due-soon" | "overdue" | "completed" } export interface KnowledgeArticle { id: string title: string category: string content: string tags: string[] lastUpdated: string } export const navItems = [ { label: "Cases", href: "/", icon: "FileText" }, { label: "Clients", href: "/clients", icon: "Users" }, { label: "Calendar", href: "/calendar", icon: "Calendar" }, { label: "Knowledge", href: "/knowledge", icon: "BookOpen" }, { label: "AI Assistant", href: "/assistant", icon: "Bot" }, { label: "Settings", href: "/settings", icon: "Settings" }, ] [V0_FILE]typescriptreact:file="app/calendar/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Header } from "@/components/header" import { Badge } from "@/components/ui/badge" import { complianceDeadlines } from "@/lib/data" import type { ComplianceDeadline } from "@/lib/types" import { Calendar, AlertTriangle, Clock, CheckCircle2, FileText, ClipboardCheck, RefreshCw, BookOpen, GraduationCap, Search } from "lucide-react" type DeadlineType = ComplianceDeadline["type"] | "all" type DeadlineStatus = ComplianceDeadline["status"] | "all" const typeConfig = { filing: { icon: FileText, label: "Filing" }, audit: { icon: ClipboardCheck, label: "Audit" }, renewal: { icon: RefreshCw, label: "Renewal" }, review: { icon: BookOpen, label: "Review" }, training: { icon: GraduationCap, label: "Training" }, } const statusConfig = { upcoming: { color: "text-muted-foreground", bg: "bg-muted", label: "Upcoming" }, "due-soon": { color: "text-yellow-400", bg: "bg-yellow-400/10", label: "Due Soon" }, overdue: { color: "text-red-400", bg: "bg-red-400/10", label: "Overdue" }, completed: { color: "text-emerald-400", bg: "bg-emerald-400/10", label: "Completed" }, } export default function CalendarPage() { const [deadlines] = useState(complianceDeadlines) const [typeFilter, setTypeFilter] = useState("all") const [statusFilter, setStatusFilter] = useState("all") const [search, setSearch] = useState("") const filteredDeadlines = deadlines .filter((d) => { const matchesType = typeFilter === "all" || d.type === typeFilter const matchesStatus = statusFilter === "all" || d.status === statusFilter const matchesSearch = d.title.toLowerCase().includes(search.toLowerCase()) || d.client.toLowerCase().includes(search.toLowerCase()) return matchesType && matchesStatus && matchesSearch }) .sort((a, b) => new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime()) const counts = { overdue: deadlines.filter((d) => d.status === "overdue").length, "due-soon": deadlines.filter((d) => d.status === "due-soon").length, upcoming: deadlines.filter((d) => d.status === "upcoming").length, } const handleTypeClick = (type: DeadlineType) => { setTypeFilter(typeFilter === type ? "all" : type) } const handleStatusClick = (status: DeadlineStatus) => { setStatusFilter(statusFilter === status ? "all" : status) } const formatDate = (dateStr: string) => { const date = new Date(dateStr) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) } return (

Compliance Calendar

{filteredDeadlines.length} deadlines

setSearch(e.target.value)} className="h-9 w-full rounded-md border border-border bg-input pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" />

{/* Summary Cards */}

{/* Type Chips */}

{(Object.keys(typeConfig) as Array).map((type) => { const config = typeConfig[type] const Icon = config.icon const isSelected = typeFilter === type const count = deadlines.filter((d) => d.type === type).length return ( ) })}

{/* Deadline List */}

{filteredDeadlines.length === 0 ? (

No deadlines match your filters

) : ( filteredDeadlines.map((deadline) => { const typeConf = typeConfig[deadline.type] const statusConf = statusConfig[deadline.status] const TypeIcon = typeConf.icon return (

{typeConf.label} {statusConf.label}

{deadline.title}

{deadline.client}

{formatDate(deadline.dueDate)}

) }) )}

) } [V0_FILE]typescriptreact:file="app/clients/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Header } from "@/components/header" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { clients, initialCases, complianceDeadlines } from "@/lib/data" import type { Client } from "@/lib/types" import { Building2, Mail, Briefcase, AlertCircle, Clock, CheckCircle2, Search, X, FileText, Calendar, TrendingUp } from "lucide-react" export default function ClientsPage() { const [clientList] = useState(clients) const [search, setSearch] = useState("") const [selectedClient, setSelectedClient] = useState(null) const filteredClients = clientList.filter( (c) => c.name.toLowerCase().includes(search.toLowerCase()) || c.industry.toLowerCase().includes(search.toLowerCase()) ) const getClientStats = (clientName: string) => { const clientCases = initialCases.filter((c) => c.client === clientName) const clientDeadlines = complianceDeadlines.filter((d) => d.client === clientName) return { totalCases: clientCases.length, openCases: clientCases.filter((c) => c.status === "open").length, inProgressCases: clientCases.filter((c) => c.status === "in-progress").length, resolvedCases: clientCases.filter((c) => c.status === "resolved").length, overdueDeadlines: clientDeadlines.filter((d) => d.status === "overdue").length, upcomingDeadlines: clientDeadlines.filter((d) => d.status === "due-soon" || d.status === "upcoming").length, } } const totalOpenCases = clientList.reduce((acc, c) => acc + c.openCases, 0) return (

Clients

{clientList.length} clients, {totalOpenCases} open cases

{/* Client Cards */}

{filteredClients.length === 0 ? (

No clients found

) : ( filteredClients.map((client) => { const stats = getClientStats(client.name) return ( ) }) )}

{/* Client Detail Modal */} {selectedClient && (

{selectedClient.name}

{selectedClient.industry}

{selectedClient.contactEmail}

{(() => { const stats = getClientStats(selectedClient.name) return ( <>

Client Health

{stats.totalCases}

Total Cases

{stats.upcomingDeadlines}

Deadlines

{stats.totalCases > 0 ? Math.round((stats.resolvedCases / stats.totalCases) * 100) : 0}%

Resolved

Case Breakdown

Open

{stats.openCases}

In Progress

{stats.inProgressCases}

Resolved

{stats.resolvedCases}

) })()}

)}

) } [V0_FILE]typescriptreact:file="app/knowledge/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Header } from "@/components/header" import { Badge } from "@/components/ui/badge" import { knowledgeArticles } from "@/lib/data" import type { KnowledgeArticle } from "@/lib/types" import { Search, BookOpen, FileText, X, Clock, Tag } from "lucide-react" const categories = ["All", "Policies", "Compliance", "Templates", "Guides"] export default function KnowledgePage() { const [articles] = useState(knowledgeArticles) const [search, setSearch] = useState("") const [categoryFilter, setCategoryFilter] = useState("All") const [selectedArticle, setSelectedArticle] = useState(null) const filteredArticles = articles.filter((a) => { const matchesCategory = categoryFilter === "All" || a.category === categoryFilter const matchesSearch = a.title.toLowerCase().includes(search.toLowerCase()) || a.content.toLowerCase().includes(search.toLowerCase()) || a.tags.some((t) => t.toLowerCase().includes(search.toLowerCase())) return matchesCategory && matchesSearch }) const handleCategoryClick = (category: string) => { setCategoryFilter(categoryFilter === category ? "All" : category) } const formatDate = (dateStr: string) => { const date = new Date(dateStr) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) } return (

Knowledge Base

{filteredArticles.length} articles

{/* Category Chips */}

{categories.slice(1).map((category) => { const isSelected = categoryFilter === category const count = articles.filter((a) => a.category === category).length return ( ) })}

{/* Article Grid */}

{filteredArticles.length === 0 ? (

No articles found

) : ( filteredArticles.map((article) => ( )) )}

{/* Article Detail Modal */} {selectedArticle && (

{selectedArticle.category}

{selectedArticle.title}

Updated {formatDate(selectedArticle.lastUpdated)}

{selectedArticle.content}

Settings

Configure your HR Pulse experience

{/* Agent Settings */}

AI Assistant Configuration

Model

Select the AI model for the assistant

Temperature: {temperature} setTemperature(Number(e.target.value))} className="w-full accent-primary" />

Precise (0.0) Balanced (0.5) Creative (1.0)

System Prompt

setSystemPrompt(e.target.value)}
                  rows={8}
                  className="w-full rounded-md border border-border bg-input p-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                />
                <p className="mt-1 text-xs text-muted-foreground">Define the assistant's personality and capabilities</p>
              </div>
            </div>
          </div>

{/* Agent Capabilities */}
          <div className="rounded-lg border border-border bg-card p-4">
            <div className="mb-4 flex items-center gap-2">
              <Sliders className="h-5 w-5 text-primary" />
              <h3 className="text-lg font-medium text-foreground">Agent Capabilities</h3>
            </div>

<div className="space-y-3">
              <div className="flex items-center justify-between rounded-md bg-secondary px-3 py-2">
                <div>
                  <p className="text-sm font-medium text-foreground">HR Communications</p>
                  <p className="text-xs text-muted-foreground">Draft letters, policies, and documentation</p>
                </div>
                <div className="h-4 w-4 rounded-full bg-emerald-400" />
              </div>
              <div className="flex items-center justify-between rounded-md bg-secondary px-3 py-2">
                <div>
                  <p className="text-sm font-medium text-foreground">Compliance Guidance</p>
                  <p className="text-xs text-muted-foreground">FMLA, ADA, FLSA, EEO, OSHA questions</p>
                </div>
                <div className="h-4 w-4 rounded-full bg-emerald-400" />
              </div>
              <div className="flex items-center justify-between rounded-md bg-secondary px-3 py-2">
                <div>
                  <p className="text-sm font-medium text-foreground">Employee Relations</p>
                  <p className="text-xs text-muted-foreground">Investigation and documentation guidance</p>
                </div>
                <div className="h-4 w-4 rounded-full bg-emerald-400" />
              </div>
              <div className="flex items-center justify-between rounded-md bg-secondary px-3 py-2">
                <div>
                  <p className="text-sm font-medium text-foreground">Knowledge Base Search</p>
                  <p className="text-xs text-muted-foreground">Search policies and templates</p>
                </div>
                <div className="h-4 w-4 rounded-full bg-yellow-400" />
              </div>
            </div>
            <p className="mt-3 text-xs text-muted-foreground">Green = Active, Yellow = Coming Soon</p>
          </div>

{/* Actions */}
          <div className="flex gap-2">
            <Button variant="outline" onClick={handleReset} className="flex-1 gap-2 bg-transparent">
              <RotateCcw className="h-4 w-4" />
              Reset to Defaults
            </Button>
            <Button onClick={handleSave} className="flex-1 gap-2">
              <Save className="h-4 w-4" />
              {saved ? "Saved!" : "Save Changes"}
            </Button>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Header } from "@/components/header"
import { Plus, Search, Clock, CheckCircle2, AlertCircle, Circle, X, MessageSquare, Send } from "lucide-react"
import { initialCases, initialComments } from "@/lib/data"
import type { Case, CaseStatus, Comment } from "@/lib/types"

type FilterStatus = CaseStatus | "all"

const statusConfig = {
  open: { icon: Circle, color: "text-yellow-400", bg: "bg-yellow-400/10" },
  "in-progress": { icon: Clock, color: "text-primary", bg: "bg-primary/10" },
  resolved: { icon: CheckCircle2, color: "text-emerald-400", bg: "bg-emerald-400/10" },
}

const priorityColors = {
  high: "bg-red-500/20 text-red-400 border-red-500/30",
  medium: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
  low: "bg-muted text-muted-foreground border-border",
}

export default function CasesPage() {
  const [cases, setCases] = useState<Case[]>(initialCases)
  const [comments, setComments] = useState<Comment[]>(initialComments)
  const [filter, setFilter] = useState<FilterStatus>("all")
  const [search, setSearch] = useState("")
  const [selectedCase, setSelectedCase] = useState<Case | null>(null)
  const [newComment, setNewComment] = useState("")
  const [showNewCase, setShowNewCase] = useState(false)
  const [newCase, setNewCase] = useState({ title: "", client: "", description: "", priority: "medium" as Case["priority"] })

const filteredCases = cases.filter((c) => {
    const matchesFilter = filter === "all" || c.status === filter
    const matchesSearch = c.title.toLowerCase().includes(search.toLowerCase()) || c.client.toLowerCase().includes(search.toLowerCase())
    return matchesFilter && matchesSearch
  })

const counts = {
    all: cases.length,
    open: cases.filter((c) => c.status === "open").length,
    "in-progress": cases.filter((c) => c.status === "in-progress").length,
    resolved: cases.filter((c) => c.status === "resolved").length,
  }

const handleChipClick = (status: FilterStatus) => {
    setFilter(filter === status ? "all" : status)
  }

const caseComments = selectedCase ? comments.filter((c) => c.caseId === selectedCase.id) : []

const handleAddComment = () => {
    if (!newComment.trim() || !selectedCase) return
    const comment: Comment = {
      id: `c${Date.now()}`,
      caseId: selectedCase.id,
      author: "You",
      content: newComment,
      created: "Just now",
    }
    setComments([...comments, comment])
    setNewComment("")
  }

const handleCreateCase = () => {
    if (!newCase.title.trim() || !newCase.client.trim()) return
    const caseItem: Case = {
      id: `HR-${String(cases.length + 1).padStart(3, "0")}`,
      title: newCase.title,
      client: newCase.client,
      description: newCase.description,
      status: "open",
      priority: newCase.priority,
      created: "Just now",
    }
    setCases([caseItem, ...cases])
    setNewCase({ title: "", client: "", description: "", priority: "medium" })
    setShowNewCase(false)
  }

return (
    <div className="min-h-screen bg-background">
      <Header />

<main className="mx-auto max-w-6xl px-4 py-6 md:px-6">
        <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h2 className="text-2xl font-semibold text-foreground">Cases</h2>
            <p className="text-sm text-muted-foreground">{filteredCases.length} total</p>
          </div>
          <div className="flex items-center gap-2">
            <div className="relative flex-1 sm:w-64 sm:flex-none">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <input
                type="text"
                placeholder="Search cases..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="h-9 w-full rounded-md border border-border bg-input pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
              />
            </div>
            <Button size="sm" className="gap-2" onClick={() => setShowNewCase(true)}>
              <Plus className="h-4 w-4" />
              <span className="hidden sm:inline">New Case</span>
            </Button>
          </div>
        </div>

<div className="mb-4 flex flex-wrap gap-2">
          {(["open", "in-progress", "resolved"] as const).map((status) => {
            const config = statusConfig[status]
            const Icon = config.icon
            const isSelected = filter === status
            return (
              <button
                key={status}
                onClick={() => handleChipClick(status)}
                className={`flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition-colors ${
                  isSelected ? "border-primary bg-primary/10 text-foreground" : "border-border bg-card text-muted-foreground hover:border-muted-foreground"
                }`}
              >
                <Icon className={`h-3.5 w-3.5 ${config.color}`} />
                <span className="capitalize">{status.replace("-", " ")}</span>
                <span className="text-xs opacity-60">{counts[status]}</span>
              </button>
            )
          })}
        </div>

<div className="space-y-2">
          {filteredCases.length === 0 ? (
            <div className="flex flex-col items-center justify-center rounded-lg border border-border bg-card py-12">
              <AlertCircle className="mb-2 h-8 w-8 text-muted-foreground" />
              <p className="text-muted-foreground">No cases found</p>
            </div>
          ) : (
            filteredCases.map((c) => {
              const config = statusConfig[c.status]
              const StatusIcon = config.icon
              const commentCount = comments.filter((cm) => cm.caseId === c.id).length
              return (
                <div
                  key={c.id}
                  className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4 transition-colors hover:border-muted-foreground sm:flex-row sm:items-center sm:justify-between"
                >
                  <div className="flex items-start gap-3">
                    <div className={`mt-0.5 rounded-full p-1.5 ${config.bg}`}>
                      <StatusIcon className={`h-4 w-4 ${config.color}`} />
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="text-xs text-muted-foreground">{c.id}</span>
                        <Badge variant="outline" className={`text-xs ${priorityColors[c.priority]}`}>
                          {c.priority}
                        </Badge>
                        {commentCount > 0 && (
                          <span className="flex items-center gap-1 text-xs text-muted-foreground">
                            <MessageSquare className="h-3 w-3" />
                            {commentCount}
                          </span>
                        )}
                      </div>
                      <p className="mt-0.5 font-medium text-foreground">{c.title}</p>
                      <p className="text-sm text-muted-foreground">{c.client}</p>
                    </div>
                  </div>
                  <div className="flex items-center justify-between gap-4 sm:justify-end">
                    <span className="text-xs text-muted-foreground">{c.created}</span>
                    <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground" onClick={() => setSelectedCase(c)}>
                      View
                    </Button>
                  </div>
                </div>
              )
            })
          )}
        </div>
      </main>

{/* New Case Modal */}
      {showNewCase && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm md:p-6">
          <div className="w-full max-w-md rounded-lg border border-border bg-card">
            <div className="flex items-center justify-between border-b border-border p-4">
              <h3 className="text-lg font-semibold text-foreground">New Case</h3>
              <button onClick={() => setShowNewCase(false)} className="rounded-md p-2 text-muted-foreground hover:text-foreground">
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="space-y-4 p-4">
              <div>
                <label className="mb-1.5 block text-sm text-muted-foreground">Title</label>
                <input
                  type="text"
                  placeholder="Case title..."
                  value={newCase.title}
                  onChange={(e) => setNewCase({ ...newCase, title: e.target.value })}
                  className="h-10 w-full rounded-md border border-border bg-input px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                />
              </div>
              <div>
                <label className="mb-1.5 block text-sm text-muted-foreground">Client</label>
                <input
                  type="text"
                  placeholder="Client name..."
                  value={newCase.client}
                  onChange={(e) => setNewCase({ ...newCase, client: e.target.value })}
                  className="h-10 w-full rounded-md border border-border bg-input px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                />
              </div>
              <div>
                <label className="mb-1.5 block text-sm text-muted-foreground">Priority</label>
                <div className="flex gap-2">
                  {(["low", "medium", "high"] as const).map((p) => (
                    <button
                      key={p}
                      onClick={() => setNewCase({ ...newCase, priority: p })}
                      className={`flex-1 rounded-md border px-3 py-2 text-sm capitalize transition-colors ${
                        newCase.priority === p
                          ? "border-primary bg-primary/10 text-foreground"
                          : "border-border bg-secondary text-muted-foreground hover:text-foreground"
                      }`}
                    >
                      {p}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="mb-1.5 block text-sm text-muted-foreground">Description (optional)</label>
                <textarea
                  placeholder="Describe the case..."
                  value={newCase.description}
                  onChange={(e) => setNewCase({ ...newCase, description: e.target.value })}
                  rows={3}
                  className="w-full resize-none rounded-md border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                />
              </div>
            </div>
            <div className="flex justify-end gap-2 border-t border-border p-4">
              <Button variant="ghost" onClick={() => setShowNewCase(false)}>
                Cancel
              </Button>
              <Button onClick={handleCreateCase} disabled={!newCase.title.trim() || !newCase.client.trim()}>
                Create Case
              </Button>
            </div>
          </div>
        </div>
      )}

{/* Case Detail Modal */}
      {selectedCase && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm md:p-6">
          <div className="flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg border border-border bg-card">
            <div className="flex items-center justify-between border-b border-border p-4">
              <div>
                <div className="flex items-center gap-2">
                  <span className="text-sm text-muted-foreground">{selectedCase.id}</span>
                  <Badge variant="outline" className={`text-xs ${priorityColors[selectedCase.priority]}`}>
                    {selectedCase.priority}
                  </Badge>
                </div>
                <h3 className="mt-1 text-lg font-semibold text-foreground">{selectedCase.title}</h3>
              </div>
              <button onClick={() => setSelectedCase(null)} className="rounded-md p-2 text-muted-foreground hover:text-foreground">
                <X className="h-5 w-5" />
              </button>
            </div>

<div className="flex-1 overflow-y-auto p-4">
              <div className="mb-4">
                <p className="text-sm text-muted-foreground">Client</p>
                <p className="text-foreground">{selectedCase.client}</p>
              </div>
              {selectedCase.description && (
                <div className="mb-4">
                  <p className="text-sm text-muted-foreground">Description</p>
                  <p className="text-foreground">{selectedCase.description}</p>
                </div>
              )}

<div className="mt-6">
                <h4 className="mb-3 flex items-center gap-2 text-sm font-medium text-foreground">
                  <MessageSquare className="h-4 w-4" />
                  Comments ({caseComments.length})
                </h4>
                <div className="space-y-3">
                  {caseComments.length === 0 ? (
                    <p className="text-sm text-muted-foreground">No comments yet.</p>
                  ) : (
                    caseComments.map((comment) => (
                      <div key={comment.id} className="rounded-md bg-secondary p-3">
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium text-foreground">{comment.author}</span>
                          <span className="text-xs text-muted-foreground">{comment.created}</span>
                        </div>
                        <p className="mt-1 text-sm text-foreground">{comment.content}</p>
                      </div>
                    ))
                  )}
                </div>
              </div>
            </div>

<div className="border-t border-border p-4">
              <div className="flex gap-2">
                <input
                  type="text"
                  placeholder="Add a comment..."
                  value={newComment}
                  onChange={(e) => setNewComment(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && handleAddComment()}
                  className="h-9 flex-1 rounded-md border border-border bg-input px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                />
                <Button size="sm" onClick={handleAddComment} disabled={!newComment.trim()}>
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]markdown:file="README.md" isMerged="true"
# HR Pulse

A case management and service delivery tool for HR outsourcing providers. Built to help HR teams manage client relationships, track compliance, and deliver better service—without replicating the HRIS.

## Features

### Case Management
Track and manage HR inquiries, employee relations issues, and client requests with prioritization, status tracking, threaded comments, and powerful search/filter capabilities.

### AI HR Assistant
Intelligent chatbot that helps draft HR communications, answer policy questions, and surface relevant compliance information. Configurable with model selection, temperature control, and custom system prompts.

### Compliance Calendar
Proactive deadline tracking for OSHA logs, EEO-1 filings, I-9 audits, benefits renewals, and policy review cycles. Visual calendar with status indicators and chip-style filters by type.

### Client Dashboard
At-a-glance health metrics per client including open cases, resolution rates, upcoming deadlines, and SLA performance tracking with detailed modal views.

### Knowledge Base
Searchable repository of HR policies, templates, and best practices with category filtering and tag support. Includes a comprehensive **Boilerplate HR Policy Starter Pack** with 12 foundational policies:

**Must-Have Legal Compliance:**
- Anti-Discrimination & Harassment Policy
- Equal Employment Opportunity (EEO) Statement
- At-Will Employment Acknowledgment
- FMLA & Leave of Absence Policy
- Workers Compensation & Workplace Safety
- Confidentiality & Data Privacy Policy

**Operational Essentials:**
- PTO & Sick Leave Policy
- Remote Work & Hybrid Policy
- Code of Conduct
- Performance Review Process
- Expense Reimbursement Policy
- IP Assignment & Invention Agreement (critical for tech startups)

### Settings & Agent Configuration
Full control over AI assistant behavior including model selection, temperature adjustment, and custom system prompt editing.

## Recommended Next Steps

### Data Persistence
| Option | Description |
|--------|-------------|
| **Supabase** | Open-source Firebase alternative with PostgreSQL, auth, and realtime subscriptions |
| **Neon** | Serverless PostgreSQL with branching and autoscaling |
| **Vercel Blob** | Simple file storage for documents and attachments |

### Authentication
| Option | Description |
|--------|-------------|
| **Supabase Auth** | Built-in auth with OAuth, email, and Row Level Security |
| **Clerk** | Drop-in auth with UI components, MFA, and organization management |

### AI Integration Roadmap
1. **Add HR Policy RAG** - Implement retrieval-augmented generation to search the Knowledge Base
2. **Client-Specific Training** - Upload client handbooks for company-specific context
3. **Document Generation Tools** - AI tools for offer letters, PIPs, termination letters
4. **Compliance Alerts Integration** - Connect AI to compliance calendar for proactive warnings

## Current Limitations

- **No Data Persistence** - Running with mock data only. Database integration needed for production.
- **Offline Not Supported** - Requires active internet connection. No offline mode or local caching.
- **No Authentication** - Missing user auth and role-based access control. Not suitable for multi-tenant use without auth layer.
- **Demo AI Integration** - AI Assistant uses boilerplate HR policies from the Knowledge Base but is not trained on client-specific data.

## Tech Stack

- Next.js 16 (App Router)
- Tailwind CSS v4
- shadcn/ui components
- Vercel AI SDK 6
- TypeScript

## Getting Started

```bash
npx shadcn@latest init
```

Or deploy directly to Vercel.

## Environment Variables

The AI Assistant uses Vercel AI Gateway which supports these providers with zero configuration:
- OpenAI
- Anthropic
- AWS Bedrock
- Google Vertex
- Fireworks AI

## License

MIT
[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { FileText, Users, Calendar, BookOpen, Bot, MessageSquare, AlertTriangle, Database, Wifi, Lock, Sparkles, Key, HardDrive, ExternalLink, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"

const features = [
  {
    icon: FileText,
    title: "Case Management",
    description: "Track HR inquiries, employee relations issues, and client requests with prioritization, status tracking, and powerful search/filter capabilities.",
  },
  {
    icon: Bot,
    title: "AI HR Assistant",
    description: "Intelligent chatbot that helps draft HR communications, answer policy questions, and surface relevant compliance information with configurable models.",
  },
  {
    icon: Calendar,
    title: "Compliance Calendar",
    description: "Proactive deadline tracking for OSHA logs, EEO-1 filings, I-9 audits, benefits renewals, and policy review cycles with visual alerts.",
  },
  {
    icon: Users,
    title: "Client Dashboard",
    description: "At-a-glance health metrics per client including open cases, resolution rates, upcoming deadlines, and SLA performance tracking.",
  },
]

const recommendations = {
  dataPersistence: [
    {
      name: "Supabase",
      description: "Open-source Firebase alternative with PostgreSQL, auth, and realtime subscriptions built-in.",
      url: "https://supabase.com",
      tags: ["PostgreSQL", "Auth", "Realtime"],
    },
    {
      name: "Neon",
      description: "Serverless PostgreSQL with branching, autoscaling, and generous free tier.",
      url: "https://neon.tech",
      tags: ["PostgreSQL", "Serverless", "Branching"],
    },
    {
      name: "Vercel Blob",
      description: "Simple file storage for documents, attachments, and uploads. Great for case files.",
      url: "https://vercel.com/docs/storage/vercel-blob",
      tags: ["File Storage", "CDN", "Simple"],
    },
  ],
  authentication: [
    {
      name: "Supabase Auth",
      description: "Built-in auth with email, OAuth providers, and Row Level Security for data protection.",
      url: "https://supabase.com/auth",
      tags: ["OAuth", "Email", "RLS"],
    },
    {
      name: "Clerk",
      description: "Drop-in authentication with beautiful UI components, MFA, and organization management.",
      url: "https://clerk.com",
      tags: ["UI Components", "MFA", "Organizations"],
    },
  ],
  aiIntegration: [
    {
      name: "Add HR Policy RAG",
      description: "Implement retrieval-augmented generation to let the AI search the Knowledge Base for relevant policies and provide accurate, sourced answers.",
    },
    {
      name: "Client-Specific Training",
      description: "Upload client handbooks and policies to give the AI context about specific company procedures and culture.",
    },
    {
      name: "Document Generation Tools",
      description: "Add AI tools for generating offer letters, PIPs, termination letters, and other HR documents with proper formatting.",
    },
    {
      name: "Compliance Alerts Integration",
      description: "Connect the AI to the compliance calendar to proactively warn about upcoming deadlines and suggest action items.",
    },
  ],
}

const limitations = [
  {
    icon: Database,
    title: "No Data Persistence",
    description: "Currently running with mock data only. Database integration needed for production use with real client information.",
  },
  {
    icon: Wifi,
    title: "Offline Not Supported",
    description: "Requires active internet connection. No offline mode or local caching for field work or connectivity issues.",
  },
  {
    icon: Lock,
    title: "No Authentication",
    description: "Missing user authentication and role-based access control. Not suitable for multi-tenant or sensitive data without auth layer.",
  },
  {
    icon: AlertTriangle,
    title: "Demo AI Integration",
    description: "AI Assistant requires API configuration. Responses are general-purpose and not trained on specific HR policies or client data.",
  },
]

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-background">
      <Header />

<main className="mx-auto max-w-6xl px-4 py-8 md:px-6 md:py-12">
        {/* Hero Section */}
        <div className="mb-12 text-center">
          <h1 className="mb-4 text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">
            HR Pulse
          </h1>
          <p className="mx-auto mb-6 max-w-2xl text-pretty text-muted-foreground">
            A case management and service delivery tool for HR outsourcing providers. Built to help HR teams manage client relationships, track compliance, and deliver better service—without replicating the HRIS.
          </p>
          <Button asChild size="lg" className="gap-2">
            <Link href="/">
              Take me to Dashboard
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>

{/* Features Section */}
        <section className="mb-16">
          <div className="mb-8 flex items-center gap-3">
            <div className="h-px flex-1 bg-border" />
            <h2 className="text-sm font-medium uppercase tracking-wider text-primary">Features</h2>
            <div className="h-px flex-1 bg-border" />
          </div>

<div className="grid gap-4 sm:grid-cols-2">
            {features.map((feature) => {
              const Icon = feature.icon
              return (
                <div
                  key={feature.title}
                  className="group relative overflow-hidden rounded-xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5"
                >
                  <div className="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-primary/5 transition-transform group-hover:scale-150" />
                  <div className="relative">
                    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                      <Icon className="h-6 w-6 text-primary" />
                    </div>
                    <h3 className="mb-2 text-lg font-semibold text-foreground">{feature.title}</h3>
                    <p className="text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </section>

{/* Limitations Section */}
        <section className="mb-16">
          <div className="mb-8 flex items-center gap-3">
            <div className="h-px flex-1 bg-border" />
            <h2 className="text-sm font-medium uppercase tracking-wider text-destructive">Current Limitations</h2>
            <div className="h-px flex-1 bg-border" />
          </div>

<div className="grid gap-4 sm:grid-cols-2">
            {limitations.map((limitation) => {
              const Icon = limitation.icon
              return (
                <div
                  key={limitation.title}
                  className="group relative overflow-hidden rounded-xl border border-border bg-card p-6 transition-all hover:border-destructive/30"
                >
                  <div className="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-destructive/5 transition-transform group-hover:scale-150" />
                  <div className="relative">
                    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-destructive/10">
                      <Icon className="h-6 w-6 text-destructive" />
                    </div>
                    <h3 className="mb-2 text-lg font-semibold text-foreground">{limitation.title}</h3>
                    <p className="text-sm leading-relaxed text-muted-foreground">{limitation.description}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </section>

{/* Recommendations Section */}
        <section className="mb-16">
          <div className="mb-8 flex items-center gap-3">
            <div className="h-px flex-1 bg-border" />
            <h2 className="text-sm font-medium uppercase tracking-wider text-primary">Recommended Next Steps</h2>
            <div className="h-px flex-1 bg-border" />
          </div>

{/* Data Persistence */}
          <div className="mb-8">
            <div className="mb-4 flex items-center gap-2">
              <Database className="h-5 w-5 text-primary" />
              <h3 className="text-lg font-semibold text-foreground">Data Persistence</h3>
            </div>
            <div className="grid gap-3 sm:grid-cols-3">
              {recommendations.dataPersistence.map((rec) => (
                <a
                  key={rec.name}
                  href={rec.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group flex flex-col rounded-lg border border-border bg-card p-4 transition-all hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5"
                >
                  <div className="mb-2 flex items-center justify-between">
                    <span className="font-medium text-foreground">{rec.name}</span>
                    <ExternalLink className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-primary" />
                  </div>
                  <p className="mb-3 flex-1 text-sm text-muted-foreground">{rec.description}</p>
                  <div className="flex flex-wrap gap-1">
                    {rec.tags.map((tag) => (
                      <span key={tag} className="rounded bg-secondary px-2 py-0.5 text-xs text-muted-foreground">
                        {tag}
                      </span>
                    ))}
                  </div>
                </a>
              ))}
            </div>
          </div>

{/* Authentication */}
          <div className="mb-8">
            <div className="mb-4 flex items-center gap-2">
              <Key className="h-5 w-5 text-primary" />
              <h3 className="text-lg font-semibold text-foreground">Authentication</h3>
            </div>
            <div className="grid gap-3 sm:grid-cols-2">
              {recommendations.authentication.map((rec) => (
                <a
                  key={rec.name}
                  href={rec.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group flex flex-col rounded-lg border border-border bg-card p-4 transition-all hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5"
                >
                  <div className="mb-2 flex items-center justify-between">
                    <span className="font-medium text-foreground">{rec.name}</span>
                    <ExternalLink className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-primary" />
                  </div>
                  <p className="mb-3 flex-1 text-sm text-muted-foreground">{rec.description}</p>
                  <div className="flex flex-wrap gap-1">
                    {rec.tags.map((tag) => (
                      <span key={tag} className="rounded bg-secondary px-2 py-0.5 text-xs text-muted-foreground">
                        {tag}
                      </span>
                    ))}
                  </div>
                </a>
              ))}
            </div>
          </div>

{/* AI Integration */}
          <div>
            <div className="mb-4 flex items-center gap-2">
              <Sparkles className="h-5 w-5 text-primary" />
              <h3 className="text-lg font-semibold text-foreground">AI Integration Roadmap</h3>
            </div>
            <div className="grid gap-3 sm:grid-cols-2">
              {recommendations.aiIntegration.map((rec, i) => (
                <div
                  key={rec.name}
                  className="flex items-start gap-3 rounded-lg border border-border bg-card p-4"
                >
                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
                    {i + 1}
                  </div>
                  <div>
                    <span className="font-medium text-foreground">{rec.name}</span>
                    <p className="mt-1 text-sm text-muted-foreground">{rec.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

{/* Tech Stack */}
        <section>
          <div className="mb-8 flex items-center gap-3">
            <div className="h-px flex-1 bg-border" />
            <h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">Tech Stack</h2>
            <div className="h-px flex-1 bg-border" />
          </div>

<div className="flex flex-wrap justify-center gap-3">
            {["Next.js 16", "Tailwind CSS v4", "shadcn/ui", "Vercel AI SDK 6", "TypeScript"].map((tech) => (
              <span
                key={tech}
                className="rounded-full border border-border bg-secondary px-4 py-2 text-sm text-foreground"
              >
                {tech}
              </span>
            ))}
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/assistant/page.tsx" isMerged="true"
"use client"

import React from "react"

import { useState, useRef, useEffect, useMemo } from "react"
import { useChat } from "@ai-sdk/react"
import { DefaultChatTransport } from "ai"
import { Header } from "@/components/header"
import { Button } from "@/components/ui/button"
import { Send, Bot, User, Settings, X, Loader2, Cpu, Check } from "lucide-react"

const DEFAULT_SYSTEM_PROMPT = `You are an expert HR assistant for HR Pulse, an HR outsourcing service platform. You help HR professionals with:

- Drafting HR communications (offer letters, PIPs, termination letters, policy updates)
- Answering HR compliance questions (FMLA, ADA, FLSA, EEO, OSHA)
- Employee relations guidance
- Best practices for investigations and documentation
- Benefits administration questions
- Workplace policy recommendations

Be professional, concise, and always remind users to consult legal counsel for specific legal advice.`

const MODEL_OPTIONS = [
  { value: "anthropic/claude-opus-4-5", label: "Claude Opus 4.5", description: "Most capable, best for complex HR tasks", provider: "Anthropic" },
  { value: "anthropic/claude-sonnet-4", label: "Claude Sonnet 4", description: "Fast and capable, great balance", provider: "Anthropic" },
  { value: "openai/gpt-4o", label: "GPT-4o", description: "OpenAI's flagship model", provider: "OpenAI" },
  { value: "openai/gpt-4o-mini", label: "GPT-4o Mini", description: "Fast and cost-effective", provider: "OpenAI" },
  { value: "openai/o1", label: "o1", description: "Advanced reasoning capabilities", provider: "OpenAI" },
  { value: "openai/o3-mini", label: "o3-mini", description: "Compact reasoning model", provider: "OpenAI" },
]

export default function AssistantPage() {
  const [input, setInput] = useState("")
  const [showSettings, setShowSettings] = useState(false)
  const [showModelSelector, setShowModelSelector] = useState(false)
  const [systemPrompt, setSystemPrompt] = useState(DEFAULT_SYSTEM_PROMPT)
  const [selectedModel, setSelectedModel] = useState(MODEL_OPTIONS[0].value)
  
  const currentModel = MODEL_OPTIONS.find(m => m.value === selectedModel) || MODEL_OPTIONS[0]
  const [temperature, setTemperature] = useState(0.7)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  
  // Store refs for latest values so transport always has current settings
  const systemPromptRef = useRef(systemPrompt)
  const selectedModelRef = useRef(selectedModel)
  
  useEffect(() => {
    systemPromptRef.current = systemPrompt
  }, [systemPrompt])
  
  useEffect(() => {
    selectedModelRef.current = selectedModel
  }, [selectedModel])

const transport = useMemo(() => new DefaultChatTransport({
    api: "/api/chat",
    prepareSendMessagesRequest: ({ messages }) => ({
      body: { messages, systemPrompt: systemPromptRef.current, model: selectedModelRef.current },
    }),
  }), [])

const { messages, sendMessage, status, setMessages } = useChat({
    transport,
  })

const isLoading = status === "streaming" || status === "submitted"

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return
    sendMessage({ text: input })
    setInput("")
  }

const handleClearChat = () => {
    setMessages([])
  }

return (
    <div className="flex min-h-screen flex-col bg-background">
      <Header />

<main className="mx-auto flex w-full max-w-4xl flex-1 flex-col px-4 py-6 md:px-6">
        <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h2 className="text-2xl font-semibold text-foreground">AI Assistant</h2>
            <p className="text-sm text-muted-foreground">Get help with HR questions and communications</p>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={() => setShowModelSelector(true)}
              className="flex items-center gap-2 rounded-lg border border-border bg-secondary px-3 py-2 text-sm transition-colors hover:border-primary/50"
            >
              <Cpu className="h-4 w-4 text-primary" />
              <span className="text-foreground">{currentModel.label}</span>
              <span className="text-xs text-muted-foreground">({currentModel.provider})</span>
            </button>
            <Button variant="outline" size="sm" onClick={() => setShowSettings(true)} className="gap-2">
              <Settings className="h-4 w-4" />
              <span className="hidden sm:inline">Settings</span>
            </Button>
          </div>
        </div>

<div className="flex flex-1 flex-col rounded-lg border border-border bg-card">
          <div className="flex-1 overflow-y-auto p-4">
            {messages.length === 0 ? (
              <div className="flex h-full flex-col items-center justify-center text-center">
                <div className="mb-4 rounded-full bg-primary/10 p-4">
                  <Bot className="h-8 w-8 text-primary" />
                </div>
                <h3 className="mb-2 text-lg font-medium text-foreground">How can I help you today?</h3>
                <p className="max-w-md text-sm text-muted-foreground">
                  Ask me about HR compliance, draft communications, or get guidance on employee relations issues.
                </p>
                <div className="mt-6 flex flex-wrap justify-center gap-2">
                  {["Draft a termination letter", "FMLA eligibility requirements", "PIP best practices"].map((suggestion) => (
                    <button
                      key={suggestion}
                      onClick={() => {
                        setInput(suggestion)
                      }}
                      className="rounded-full border border-border bg-secondary px-4 py-2 text-sm text-foreground transition-colors hover:border-primary"
                    >
                      {suggestion}
                    </button>
                  ))}
                </div>
              </div>
            ) : (
              <div className="space-y-4">
                {messages.map((message) => {
                  const isUser = message.role === "user"
                  return (
                    <div key={message.id} className={`flex gap-3 ${isUser ? "justify-end" : ""}`}>
                      {!isUser && (
                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
                          <Bot className="h-4 w-4 text-primary" />
                        </div>
                      )}
                      <div className={`max-w-[80%] rounded-lg px-4 py-2 ${isUser ? "bg-primary text-primary-foreground" : "bg-secondary text-foreground"}`}>
                        {message.parts.map((part, index) => {
                          if (part.type === "text") {
                            return (
                              <p key={index} className="whitespace-pre-wrap text-sm">
                                {part.text}
                              </p>
                            )
                          }
                          return null
                        })}
                      </div>
                      {isUser && (
                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted">
                          <User className="h-4 w-4 text-muted-foreground" />
                        </div>
                      )}
                    </div>
                  )
                })}
                {isLoading && (
                  <div className="flex gap-3">
                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
                      <Bot className="h-4 w-4 text-primary" />
                    </div>
                    <div className="flex items-center gap-2 rounded-lg bg-secondary px-4 py-2">
                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">Thinking...</span>
                    </div>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </div>
            )}
          </div>

<div className="border-t border-border p-4">
            <form onSubmit={handleSubmit} className="flex gap-2">
              <input
                type="text"
                placeholder="Ask a question..."
                value={input}
                onChange={(e) => setInput(e.target.value)}
                disabled={isLoading}
                className="h-10 flex-1 rounded-md border border-border bg-input px-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
              />
              <Button type="submit" disabled={!input.trim() || isLoading}>
                <Send className="h-4 w-4" />
              </Button>
            </form>
          </div>
        </div>
      </main>

{/* Settings Modal */}
      {showSettings && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm">
          <div className="w-full max-w-lg rounded-lg border border-border bg-card">
            <div className="flex items-center justify-between border-b border-border p-4">
              <h3 className="text-lg font-semibold text-foreground">Agent Settings</h3>
              <button onClick={() => setShowSettings(false)} className="rounded-md p-2 text-muted-foreground hover:text-foreground">
                <X className="h-5 w-5" />
              </button>
            </div>

<div className="space-y-4 p-4">
              <div>
                <label className="mb-2 block text-sm font-medium text-foreground">Model</label>
                <button
                  onClick={() => {
                    setShowSettings(false)
                    setShowModelSelector(true)
                  }}
                  className="flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 text-sm text-foreground transition-colors hover:border-primary/50"
                >
                  <span>{currentModel.label}</span>
                  <span className="text-xs text-muted-foreground">{currentModel.provider}</span>
                </button>
              </div>

<div>
                <label className="mb-2 block text-sm font-medium text-foreground">Temperature: {temperature}</label>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.1"
                  value={temperature}
                  onChange={(e) => setTemperature(Number(e.target.value))}
                  className="w-full accent-primary"
                />
                <div className="mt-1 flex justify-between text-xs text-muted-foreground">
                  <span>Precise</span>
                  <span>Creative</span>
                </div>
              </div>

<div>
                <label className="mb-2 block text-sm font-medium text-foreground">System Prompt</label>
                <textarea
                  value={systemPrompt}
                  onChange={(e) => setSystemPrompt(e.target.value)}
                  rows={6}
                  className="w-full rounded-md border border-border bg-input p-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                />
              </div>

<div className="flex gap-2 pt-2">
                <Button variant="outline" onClick={handleClearChat} className="flex-1 bg-transparent">
                  Clear Chat
                </Button>
                <Button onClick={() => setShowSettings(false)} className="flex-1">
                  Save
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

{/* Model Selector Modal */}
      {showModelSelector && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm">
          <div className="w-full max-w-xl rounded-lg border border-border bg-card">
            <div className="flex items-center justify-between border-b border-border p-4">
              <div>
                <h3 className="text-lg font-semibold text-foreground">Select Model</h3>
                <p className="text-sm text-muted-foreground">Choose an AI model for the assistant</p>
              </div>
              <button onClick={() => setShowModelSelector(false)} className="rounded-md p-2 text-muted-foreground hover:text-foreground">
                <X className="h-5 w-5" />
              </button>
            </div>

<div className="max-h-[60vh] overflow-y-auto p-4">
              <div className="space-y-2">
                {MODEL_OPTIONS.map((model) => {
                  const isSelected = selectedModel === model.value
                  return (
                    <button
                      key={model.value}
                      onClick={() => {
                        setSelectedModel(model.value)
                        setShowModelSelector(false)
                      }}
                      className={`flex w-full items-start gap-4 rounded-lg border p-4 text-left transition-all ${
                        isSelected
                          ? "border-primary bg-primary/5"
                          : "border-border bg-secondary hover:border-primary/30 hover:bg-secondary/80"
                      }`}
                    >
                      <div className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ${
                        isSelected ? "border-primary bg-primary" : "border-muted-foreground"
                      }`}>
                        {isSelected && <Check className="h-3 w-3 text-primary-foreground" />}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <span className="font-medium text-foreground">{model.label}</span>
                          <span className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">{model.provider}</span>
                        </div>
                        <p className="mt-1 text-sm text-muted-foreground">{model.description}</p>
                      </div>
                    </button>
                  )
                })}
              </div>
            </div>

<div className="border-t border-border p-4">
              <p className="text-center text-xs text-muted-foreground">
                Models are powered by Vercel AI Gateway. Different models have different capabilities and response speeds.
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/calendar/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/clients/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/knowledge/loading.tsx"
export default function Loading() {
  return null
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from rcrades

More Templates Like This

About

Tags

Share

About

Tags

Share

More from rcrades

More Templates Like This