[V0_FILE]typescriptreact:file="app/intake/page.tsx" isMerged="true" 'use client' import { useState } from 'react' import FileUploadInput from '@/components/file-upload-input' import UploadButton from '@/components/upload-button' export default function IntakePage() { const [employeeFile, setEmployeeFile] = useState(null) const [taskFile, setTaskFile] = useState(null) const [employeeError, setEmployeeError] = useState('') const [taskError, setTaskError] = useState('') const isFormValid = employeeFile !== null && taskFile !== null && !employeeError && !taskError const handleEmployeeFileChange = (file: File | null, error: string) => { setEmployeeFile(file) setEmployeeError(error) } const handleTaskFileChange = (file: File | null, error: string) => { setTaskFile(file) setTaskError(error) } const handleContinue = () => { if (isFormValid) { console.log('Files ready for upload:', { employeeFile, taskFile }) // Handle form submission here } } return (

{/* Header */}

Upload Employee & Task Files

{/* File Upload Inputs */}

{/* Continue Button */}

) } [V0_FILE]typescriptreact:file="components/file-upload-input.tsx" isMerged="true" 'use client' import { useState } from 'react' interface FileUploadInputProps { label: string onChange: (file: File | null, error: string) => void fileName: string error: string } export default function FileUploadInput({ label, onChange, fileName, error, }: FileUploadInputProps) { const [isDragOver, setIsDragOver] = useState(false) const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] validateAndSetFile(file) } const validateAndSetFile = (file: File | undefined) => { if (!file) { onChange(null, '') return } if (!file.name.toLowerCase().endsWith('.csv')) { onChange(null, 'Please upload a valid CSV file.') return } onChange(file, '') } return (

{label} {/* File Input */}

setIsDragOver(true)} onDragLeave={() => setIsDragOver(false)} >

Choose a CSV file or drag and drop

{/* File Name Display */} {fileName && (

✓ {fileName}

)} {/* Info Text */}

Only CSV files are allowed.

{/* Error Message */} {error && (

{error}

)}

) } [V0_FILE]typescriptreact:file="components/upload-button.tsx" isMerged="true" 'use client' interface UploadButtonProps { onClick: () => void disabled: boolean } export default function UploadButton({ onClick, disabled }: UploadButtonProps) { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 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: 'Task Scheduling & Review', description: 'Upload and schedule tasks with AI-powered recommendations', 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]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.3", "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": "^0.9.9", "zod": "3.25.76" }, "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]css:file="app/globals.css" isEdit="true" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { /* Minimalist Light Theme */ --background: oklch(0.98 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.15 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.92 0 0); --secondary-foreground: oklch(0.15 0 0); --muted: oklch(0.85 0 0); --muted-foreground: oklch(0.56 0 0); --accent: oklch(0.38 0.15 260); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.63 0.23 25); --destructive-foreground: oklch(1 0 0); --warning: oklch(0.85 0.2 80); --warning-foreground: oklch(0.15 0 0); --success: oklch(0.65 0.2 140); --success-foreground: oklch(1 0 0); --border: oklch(0.92 0 0); --input: oklch(0.98 0 0); --ring: oklch(0.38 0.15 260); --chart-1: oklch(0.38 0.15 260); --chart-2: oklch(0.65 0.2 20); --chart-3: oklch(0.65 0.2 140); --chart-4: oklch(0.75 0.12 50); --chart-5: oklch(0.85 0.2 80); --radius: 0.5rem; } @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) - 2px); --radius-md: calc(var(--radius)); --radius-lg: calc(var(--radius) + 4px); --radius-xl: calc(var(--radius) + 8px); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/csv-preview.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState, useEffect } from 'react' import { Card } from '@/components/ui/card' interface CSVPreviewProps { file: File title: string } export function CSVPreview({ file, title }: CSVPreviewProps) { const [rows, setRows] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const reader = new FileReader() reader.onload = (e) => { const text = e.target?.result as string const lines = text.split('\n').filter(line => line.trim()) const parsedRows = lines.slice(0, 6).map(line => line.split(',').map(cell => cell.trim()) ) setRows(parsedRows) setLoading(false) } reader.readAsText(file) }, [file]) if (loading) { return

Loading preview...

} if (rows.length === 0) { return

Error reading CSV

} return (

{title}

{rows[0].map((header, i) => ( ))} {rows.slice(1, 6).map((row, i) => ( {row.map((cell, j) => ( ))} ))}

{header}
{cell.length > 50 ? cell.substring(0, 50) + '...' : cell}

Showing first 5 rows of data

) } [V0_FILE]typescriptreact:file="components/task-creation-form.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' const TASK_TYPES = ['Development', 'Design', 'QA', 'Documentation', 'Research'] const PRIORITIES = ['Low', 'Medium', 'High', 'Critical'] const SKILLS = [ 'React', 'TypeScript', 'Node.js', 'UI/UX', 'Testing', 'DevOps', 'Database', 'Python', 'API Design', 'Project Management' ] interface TaskCreationFormProps { onAddTask: (task: any) => void } export function TaskCreationForm({ onAddTask }: TaskCreationFormProps) { const [formData, setFormData] = useState({ name: '', type: TASK_TYPES[0], description: '', duration: '4', priority: PRIORITIES[1], startDate: '', startTime: '09:00', endDate: '', endTime: '17:00', skills: [] as string[] }) const handleInputChange = (field: string, value: any) => { setFormData(prev => ({ ...prev, [field]: value })) } const toggleSkill = (skill: string) => { setFormData(prev => ({ ...prev, skills: prev.skills.includes(skill) ? prev.skills.filter(s => s !== skill) : [...prev.skills, skill] })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!formData.name || !formData.description || formData.skills.length === 0) { alert('Please fill in all required fields') return } onAddTask({ ...formData, createdAt: new Date().toISOString() }) // Reset form setFormData({ name: '', type: TASK_TYPES[0], description: '', duration: '4', priority: PRIORITIES[1], startDate: '', startTime: '09:00', endDate: '', endTime: '17:00', skills: [] }) } return (

{/* Task Name */}

Task Name * handleInputChange('name', e.target.value)} placeholder="e.g., Build user dashboard" className="mt-2 rounded-lg border border-border bg-background" />

{/* Type and Priority */}

Task Type

Priority

{/* Description */}

Description *

handleInputChange('description', e.target.value)}
          placeholder="Detailed task description..."
          rows={3}
          className="mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-foreground"
        />
      </div>

{/* Duration */}
      <div>
        <Label htmlFor="duration" className="text-sm font-semibold text-foreground">Duration (hours)</Label>
        <Input
          id="duration"
          type="number"
          min="1"
          value={formData.duration}
          onChange={(e) => handleInputChange('duration', e.target.value)}
          className="mt-2 rounded-lg border border-border bg-background"
        />
      </div>

{/* Date and Time Range */}
      <div className="grid gap-6 md:grid-cols-2">
        <div>
          <Label htmlFor="startDate" className="text-sm font-semibold text-foreground">Start Date</Label>
          <Input
            id="startDate"
            type="date"
            value={formData.startDate}
            onChange={(e) => handleInputChange('startDate', e.target.value)}
            className="mt-2 rounded-lg border border-border bg-background"
          />
        </div>

<div>
          <Label htmlFor="startTime" className="text-sm font-semibold text-foreground">Start Time</Label>
          <Input
            id="startTime"
            type="time"
            value={formData.startTime}
            onChange={(e) => handleInputChange('startTime', e.target.value)}
            className="mt-2 rounded-lg border border-border bg-background"
          />
        </div>

<div>
          <Label htmlFor="endDate" className="text-sm font-semibold text-foreground">End Date</Label>
          <Input
            id="endDate"
            type="date"
            value={formData.endDate}
            onChange={(e) => handleInputChange('endDate', e.target.value)}
            className="mt-2 rounded-lg border border-border bg-background"
          />
        </div>

<div>
          <Label htmlFor="endTime" className="text-sm font-semibold text-foreground">End Time</Label>
          <Input
            id="endTime"
            type="time"
            value={formData.endTime}
            onChange={(e) => handleInputChange('endTime', e.target.value)}
            className="mt-2 rounded-lg border border-border bg-background"
          />
        </div>
      </div>

{/* Skills Multi-Select */}
      <div>
        <Label className="text-sm font-semibold text-foreground">Required Skills *</Label>
        <div className="mt-3 flex flex-wrap gap-2">
          {SKILLS.map(skill => (
            <button
              key={skill}
              type="button"
              onClick={() => toggleSkill(skill)}
              className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
                formData.skills.includes(skill)
                  ? 'bg-primary text-primary-foreground'
                  : 'border border-border bg-background text-foreground hover:border-foreground/50'
              }`}
            >
              {skill}
            </button>
          ))}
        </div>
      </div>

{/* Submit Button */}
      <Button
        type="submit"
        className="w-full bg-primary text-primary-foreground hover:bg-primary/90 py-3 text-base font-medium rounded-lg"
      >
        Add to Queue
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/queued-tasks-list.tsx" isEdit="true" isMerged="true"
'use client'

import { Button } from '@/components/ui/button'
import { X } from 'lucide-react'

interface Task {
  id: number
  name: string
  type: string
  priority: string
  duration: string
  skills: string[]
  description?: string
}

interface QueuedTasksListProps {
  tasks: Task[]
  onRemoveTask: (taskId: number) => void
}

export function QueuedTasksList({ tasks, onRemoveTask }: QueuedTasksListProps) {
  if (tasks.length === 0) {
    return (
      <div className="rounded-lg border border-border bg-background/50 p-8 text-center">
        <p className="text-muted-foreground">No tasks queued yet. Create a task to get started.</p>
      </div>
    )
  }

const priorityBg = {
    Low: 'bg-blue-50 text-blue-700 border border-blue-200',
    Medium: 'bg-yellow-50 text-yellow-700 border border-yellow-200',
    High: 'bg-orange-50 text-orange-700 border border-orange-200',
    Critical: 'bg-red-50 text-red-700 border border-red-200'
  }

return (
    <div className="space-y-3">
      {tasks.map((task) => (
        <div key={task.id} className="rounded-lg border border-border bg-card p-4">
          <div className="flex items-start justify-between gap-4">
            <div className="flex-1">
              <div className="flex items-center gap-3">
                <h3 className="font-semibold text-foreground">{task.name}</h3>
                <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${priorityBg[task.priority as keyof typeof priorityBg]}`}>
                  {task.priority}
                </span>
              </div>
              {task.description && (
                <p className="mt-1 text-sm text-muted-foreground">{task.description}</p>
              )}
              <div className="mt-2 flex flex-wrap gap-2">
                <span className="text-xs text-muted-foreground">{task.type}</span>
                <span className="text-xs text-muted-foreground">•</span>
                <span className="text-xs text-muted-foreground">{task.duration}h</span>
                <span className="text-xs text-muted-foreground">•</span>
                <div className="flex gap-1 text-xs">
                  {task.skills.slice(0, 2).map(s => (
                    <span key={s} className="rounded border border-border bg-muted px-1.5 py-0.5 text-muted-foreground">{s}</span>
                  ))}
                  {task.skills.length > 2 && <span className="text-muted-foreground">+{task.skills.length - 2}</span>}
                </div>
              </div>
            </div>
            <button
              onClick={() => onRemoveTask(task.id)}
              className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive transition-colors"
              title="Remove task"
            >
              <X className="h-5 w-5" />
            </button>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/loading-spinner.tsx" isMerged="true"
'use client'

export function LoadingSpinner() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 py-12">
      <div className="relative h-12 w-12">
        <div className="absolute inset-0 rounded-full border-4 border-muted"></div>
        <div className="absolute inset-0 animate-spin rounded-full border-4 border-transparent border-t-primary"></div>
      </div>
      <p className="text-sm text-muted-foreground">Processing your schedule with AI...</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/weekly-schedule-grid.tsx" isMerged="true"
'use client'

import { Card } from '@/components/ui/card'

export interface ScheduleBlock {
  id: string
  employeeId: string
  employeeName: string
  taskName: string
  day: number // 0-6 for Mon-Sun
  startTime: number // 0-24
  duration: number // hours
  type: string // Development, Design, etc
  color: string // color class
}

interface WeeklyScheduleGridProps {
  scheduleBlocks: ScheduleBlock[]
  employees: Array<{ id: string; name: string }>
}

export function WeeklyScheduleGrid({ scheduleBlocks, employees }: WeeklyScheduleGridProps) {
  const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
  const HOURS = Array.from({ length: 24 }, (_, i) => i)

const getBlocksForCell = (employeeId: string, day: number, hour: number) => {
    return scheduleBlocks.filter(block =>
      block.employeeId === employeeId &&
      block.day === day &&
      block.startTime <= hour &&
      block.startTime + block.duration > hour
    )
  }

const colorMap: Record<string, string> = {
    'Development': 'bg-primary/20 border-l-4 border-primary text-primary',
    'Design': 'bg-accent/20 border-l-4 border-accent text-accent',
    'QA': 'bg-success/20 border-l-4 border-success text-success',
    'Documentation': 'bg-secondary/20 border-l-4 border-secondary text-secondary',
    'Research': 'bg-warning/20 border-l-4 border-warning text-warning',
  }

return (
    <div className="overflow-x-auto rounded-lg border border-border">
      <div className="inline-block min-w-full">
        {/* Header - Days of Week */}
        <div className="flex">
          <div className="w-32 flex-shrink-0 border-r border-border bg-muted p-3 font-semibold">
            Employee
          </div>
          {DAYS.map((day, idx) => (
            <div key={idx} className="flex-1 border-r border-border bg-muted p-3 text-center font-semibold text-sm min-w-24">
              {day}
            </div>
          ))}
        </div>

{/* Time Rows and Employee Columns */}
        {employees.map((employee) => (
          <div key={employee.id} className="flex border-b border-border">
            {/* Employee Name Column */}
            <div className="w-32 flex-shrink-0 border-r border-border bg-card p-3 font-medium text-sm">
              <div className="truncate">{employee.name}</div>
            </div>

{/* Day Columns */}
            {DAYS.map((_, dayIdx) => (
              <div
                key={dayIdx}
                className="flex-1 border-r border-border bg-card/50 min-w-24"
              >
                <div className="flex h-32 flex-col text-xs">
                  {/* Hourly Grid for the Day */}
                  <div className="relative flex h-full flex-col divide-y divide-border/30">
                    {HOURS.slice(8, 18).map((hour) => (
                      <div
                        key={hour}
                        className="relative h-8 flex-1 border-b border-border/30 bg-gradient-to-b from-transparent to-transparent hover:bg-muted/30 transition-colors"
                      >
                        {/* Get the first block starting at this hour */}
                        {getBlocksForCell(employee.id, dayIdx, hour)[0] && (
                          <div className="absolute inset-0 overflow-hidden">
                            {getBlocksForCell(employee.id, dayIdx, hour)[0] && (
                              (() => {
                                const block = getBlocksForCell(employee.id, dayIdx, hour)[0]
                                if (block.startTime === hour) {
                                  const heightPercent = Math.min(block.duration * 100, 100)
                                  return (
                                    <div
                                      className={`w-full overflow-hidden rounded-sm p-1 text-[10px] font-medium ${colorMap[block.type] || 'bg-muted'}`}
                                      style={{
                                        height: `${Math.min(block.duration * 32, 200)}px`
                                      }}
                                    >
                                      <div className="truncate font-semibold">{block.taskName}</div>
                                      <div className="truncate text-[9px] opacity-75">{block.type}</div>
                                    </div>
                                  )
                                }
                              })()
                            )}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>

{/* Legend */}
      <div className="border-t border-border bg-muted p-4">
        <div className="flex flex-wrap gap-4 text-xs">
          {Object.entries(colorMap).map(([type, color]) => (
            <div key={type} className="flex items-center gap-2">
              <div className={`h-3 w-3 rounded-full ${color.split(' ')[0]}`}></div>
              <span>{type}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/review/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
'use client'

import { useState, useEffect } from 'react'
import { AIAlertsSection, type AIAlert } from '@/components/ai-alerts-section'
import { AITradeoffsSection, type AITradeoff } from '@/components/ai-tradeoffs-section'
import { WeeklyScheduleGrid, type ScheduleBlock } from '@/components/weekly-schedule-grid'
import { ScheduleStats } from '@/components/schedule-stats'
import { ScheduleSummary } from '@/components/schedule-summary'
import { ExportSection } from '@/components/export-section'
import { LoadingOverlay } from '@/components/loading-overlay'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { ArrowLeft } from 'lucide-react'

// Mock data - this would come from your API
const MOCK_ALERTS: AIAlert[] = [
  {
    id: '1',
    type: 'risk',
    title: 'Skill Gap Detected',
    description: 'Designer role requires UI/UX skills, but 1 task has no qualified designer assigned.',
    severity: 'high'
  },
  {
    id: '2',
    type: 'warning',
    title: 'Overallocation Warning',
    description: 'John Doe is scheduled for 10 hours on Friday, exceeding the 8-hour workday limit.',
    severity: 'medium'
  },
  {
    id: '3',
    type: 'info',
    title: 'Schedule Optimization',
    description: 'Backend development tasks can start Monday instead of Wednesday for better resource utilization.',
    severity: 'low'
  }
]

const MOCK_TRADEOFFS: AITradeoff[] = [
  {
    id: 'trade-1',
    title: 'Extended Timeline for Quality',
    description: 'Allocate extra 8 hours for QA testing to reduce bugs in production.',
    impact: 'Adds 1 day to project timeline, reduces defects by ~40%',
    recommendation: 'Approve: This improves code quality significantly with minimal schedule impact.'
  },
  {
    id: 'trade-2',
    title: 'Parallel Task Execution',
    description: 'Run UI and Backend development in parallel instead of sequentially.',
    impact: 'Reduces timeline by 3 days, increases coordination overhead by 25%',
    recommendation: 'Approve: Net savings justify the coordination effort.'
  },
  {
    id: 'trade-3',
    title: 'Junior Developer Assignment',
    description: 'Use junior developer for Frontend tasks with senior mentoring.',
    impact: 'Saves 40 hours, requires 5 hours mentoring per week',
    recommendation: 'Conditional: Approve only if senior developer availability confirmed.'
  }
]

const MOCK_EMPLOYEES = [
  { id: '1', name: 'Alice Chen' },
  { id: '2', name: 'Bob Smith' },
  { id: '3', name: 'Carol White' },
  { id: '4', name: 'David Jones' }
]

const MOCK_SCHEDULE: ScheduleBlock[] = [
  {
    id: 's1',
    employeeId: '1',
    employeeName: 'Alice Chen',
    taskName: 'API Design',
    day: 0,
    startTime: 9,
    duration: 4,
    type: 'Development',
    color: 'bg-primary/20'
  },
  {
    id: 's2',
    employeeId: '1',
    employeeName: 'Alice Chen',
    taskName: 'Code Review',
    day: 0,
    startTime: 13,
    duration: 3,
    type: 'Development',
    color: 'bg-primary/20'
  },
  {
    id: 's3',
    employeeId: '2',
    employeeName: 'Bob Smith',
    taskName: 'UI Components',
    day: 1,
    startTime: 9,
    duration: 6,
    type: 'Design',
    color: 'bg-accent/20'
  },
  {
    id: 's4',
    employeeId: '3',
    employeeName: 'Carol White',
    taskName: 'QA Testing',
    day: 2,
    startTime: 8,
    duration: 8,
    type: 'QA',
    color: 'bg-success/20'
  },
  {
    id: 's5',
    employeeId: '4',
    employeeName: 'David Jones',
    taskName: 'Documentation',
    day: 3,
    startTime: 10,
    duration: 5,
    type: 'Documentation',
    color: 'bg-secondary/20'
  },
  {
    id: 's6',
    employeeId: '2',
    employeeName: 'Bob Smith',
    taskName: 'Design Review',
    day: 4,
    startTime: 9,
    duration: 3,
    type: 'Design',
    color: 'bg-accent/20'
  }
]

export default function ReviewPage() {
  const [isLoading, setIsLoading] = useState(false)
  const [activeTab, setActiveTab] = useState('alerts')
  const [approvedTradeoffs, setApprovedTradeoffs] = useState<string[]>([])

// Simulate AI processing
  useEffect(() => {
    const timer = setTimeout(() => setIsLoading(false), 0)
    return () => clearTimeout(timer)
  }, [])

const handleApproveTradeoff = (id: string) => {
    setApprovedTradeoffs([...approvedTradeoffs, id])
  }

const handleRejectTradeoff = (id: string) => {
    setApprovedTradeoffs(approvedTradeoffs.filter(t => t !== id))
  }

const handleExportPDF = () => {
    // In a real app, use a library like jsPDF or html2pdf
    alert('PDF export initiated. In production, this would generate a professional PDF.')
  }

const handleExportCSV = () => {
    // Generate CSV content
    const csvContent = 'data:text/csv;charset=utf-8,Employee,Task,Day,Start Time,Duration\nAlice Chen,API Design,Monday,09:00,4 hours\nBob Smith,UI Components,Tuesday,09:00,6 hours'
    const link = document.createElement('a')
    link.setAttribute('href', csvContent)
    link.setAttribute('download', 'schedule.csv')
    link.click()
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card">
        <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Button
                variant="outline"
                size="sm"
                onClick={() => window.location.href = '/'}
                className="gap-2"
              >
                <ArrowLeft className="h-4 w-4" />
                Back to Intake
              </Button>
              <div>
                <h1 className="text-2xl font-bold">Schedule Review & Approval</h1>
                <p className="text-sm text-muted-foreground">Review AI recommendations and finalize your schedule</p>
              </div>
            </div>
          </div>
        </div>
      </header>

<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8 space-y-8">
        {/* Schedule Summary */}
        <ScheduleSummary
          totalTasks={MOCK_SCHEDULE.length}
          aiRecommendations={MOCK_TRADEOFFS.length}
          approvedRecommendations={approvedTradeoffs.length}
          conflictsResolved={2}
        />

{/* Schedule Stats */}
        <ScheduleStats
          totalHours={38}
          employeeCount={MOCK_EMPLOYEES.length}
          taskCount={MOCK_SCHEDULE.length}
          utilizationRate={78}
        />

{/* Tabbed Content */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="alerts">
              AI Alerts
              <span className="ml-2 inline-flex h-5 w-5 items-center justify-center rounded-full bg-destructive/20 text-xs font-medium text-destructive">
                {MOCK_ALERTS.length}
              </span>
            </TabsTrigger>
            <TabsTrigger value="tradeoffs">
              AI Recommendations
              <span className="ml-2 inline-flex h-5 w-5 items-center justify-center rounded-full bg-accent/20 text-xs font-medium text-accent">
                {MOCK_TRADEOFFS.length}
              </span>
            </TabsTrigger>
            <TabsTrigger value="schedule">Weekly Schedule</TabsTrigger>
          </TabsList>

{/* AI Alerts Tab */}
          <TabsContent value="alerts" className="space-y-4">
            <Card className="p-6">
              <h2 className="mb-4 text-lg font-semibold">System Alerts & Issues</h2>
              <AIAlertsSection alerts={MOCK_ALERTS} />
            </Card>
          </TabsContent>

{/* AI Tradeoffs Tab */}
          <TabsContent value="tradeoffs" className="space-y-4">
            <Card className="p-6">
              <div className="mb-4 space-y-1">
                <h2 className="text-lg font-semibold">AI-Powered Optimization Recommendations</h2>
                <p className="text-sm text-muted-foreground">
                  Review these recommendations from our AI system. Approved changes will be applied to your schedule.
                </p>
              </div>
            </Card>
            <AITradeoffsSection
              tradeoffs={MOCK_TRADEOFFS}
              onApprove={handleApproveTradeoff}
              onReject={handleRejectTradeoff}
            />
            {approvedTradeoffs.length > 0 && (
              <Card className="border-success/20 bg-success/5 p-4">
                <p className="text-sm text-success">
                  {approvedTradeoffs.length} recommendation{approvedTradeoffs.length !== 1 ? 's' : ''} approved and will be reflected in your schedule.
                </p>
              </Card>
            )}
          </TabsContent>

{/* Schedule Tab */}
          <TabsContent value="schedule" className="space-y-4">
            <Card className="p-6">
              <h2 className="mb-4 text-lg font-semibold">Weekly Team Schedule</h2>
              <p className="mb-4 text-sm text-muted-foreground">
                Visual representation of all assigned tasks across your team for the week.
              </p>
              <WeeklyScheduleGrid scheduleBlocks={MOCK_SCHEDULE} employees={MOCK_EMPLOYEES} />
            </Card>
          </TabsContent>
        </Tabs>

{/* Export Section */}
        <ExportSection onExportPDF={handleExportPDF} onExportCSV={handleExportCSV} />

{/* Action Buttons */}
        <Card className="p-6">
          <div className="flex flex-wrap gap-4">
            <Button
              onClick={() => window.location.href = '/'}
              variant="outline"
              className="flex-1 sm:flex-none"
            >
              Back to Intake
            </Button>
            <Button
              onClick={() => alert('Schedule finalized! Your team can now view the approved schedule.')}
              className="flex-1 bg-success text-success-foreground hover:bg-success/90 sm:flex-none"
            >
              Finalize Schedule
            </Button>
          </div>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ai-alerts-section.tsx" isEdit="true" isMerged="true"
'use client'

import { AlertCircle, TrendingUp, Info } from 'lucide-react'

export interface AIAlert {
  id: string
  type: 'risk' | 'warning' | 'info'
  title: string
  description: string
  severity: 'low' | 'medium' | 'high'
}

interface AIAlertsSectionProps {
  alerts: AIAlert[]
}

export function AIAlertsSection({ alerts }: AIAlertsSectionProps) {
  if (alerts.length === 0) {
    return (
      <div className="rounded-lg border border-border bg-background/50 p-8 text-center">
        <div className="mx-auto mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-success/10">
          <AlertCircle className="h-6 w-6 text-success" />
        </div>
        <h3 className="font-semibold text-foreground">No Issues Detected</h3>
        <p className="mt-1 text-sm text-muted-foreground">Your schedule looks optimal with no conflicts or skill gaps.</p>
      </div>
    )
  }

const severityConfig = {
    low: { border: 'border-blue-200', bg: 'bg-blue-50', text: 'text-blue-700', icon: Info },
    medium: { border: 'border-yellow-200', bg: 'bg-yellow-50', text: 'text-yellow-700', icon: TrendingUp },
    high: { border: 'border-red-200', bg: 'bg-red-50', text: 'text-red-700', icon: AlertCircle }
  }

const typeIcons = {
    risk: AlertCircle,
    warning: TrendingUp,
    info: Info
  }

return (
    <div className="space-y-3">
      {alerts.map((alert) => {
        const config = severityConfig[alert.severity]
        const Icon = typeIcons[alert.type]
        return (
          <div
            key={alert.id}
            className={`rounded-lg border-2 ${config.border} ${config.bg} p-4 ${config.text}`}
          >
            <div className="flex items-start gap-3">
              <Icon className="mt-0.5 h-5 w-5 flex-shrink-0" />
              <div className="flex-1">
                <h4 className="font-semibold">{alert.title}</h4>
                <p className="mt-1 text-sm opacity-85">{alert.description}</p>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ai-tradeoffs-section.tsx" isEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { CheckCircle2, XCircle, ThumbsUp } from 'lucide-react'

export interface AITradeoff {
  id: string
  title: string
  description: string
  impact: string
  recommendation: string
  approved?: boolean
}

interface AITradeoffsSectionProps {
  tradeoffs: AITradeoff[]
  onApprove: (id: string) => void
  onReject: (id: string) => void
}

export function AITradeoffsSection({ tradeoffs, onApprove, onReject }: AITradeoffsSectionProps) {
  const [decisions, setDecisions] = useState<Record<string, boolean>>({})

const handleApprove = (id: string) => {
    setDecisions(prev => ({ ...prev, [id]: true }))
    onApprove(id)
  }

const handleReject = (id: string) => {
    setDecisions(prev => ({ ...prev, [id]: false }))
    onReject(id)
  }

if (tradeoffs.length === 0) {
    return (
      <div className="rounded-lg border border-border bg-background/50 p-8 text-center">
        <p className="text-muted-foreground">No optimization recommendations available.</p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {tradeoffs.map((tradeoff) => {
        const isDecided = tradeoff.id in decisions
        const isApproved = decisions[tradeoff.id]

return (
          <div key={tradeoff.id} className="rounded-lg border border-border bg-card p-6">
            <div className="mb-4 flex items-start justify-between">
              <div className="flex-1">
                <div className="flex items-center gap-3">
                  <h4 className="font-semibold text-foreground">{tradeoff.title}</h4>
                  {isDecided && (
                    isApproved ? (
                      <CheckCircle2 className="h-5 w-5 text-success flex-shrink-0" />
                    ) : (
                      <XCircle className="h-5 w-5 text-destructive flex-shrink-0" />
                    )
                  )}
                </div>
                <p className="mt-2 text-sm text-foreground">{tradeoff.description}</p>
              </div>
            </div>

<div className="space-y-3">
              <div className="rounded-lg border border-border bg-muted/50 p-3">
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Impact</p>
                <p className="mt-1.5 text-sm text-foreground">{tradeoff.impact}</p>
              </div>

<div className="rounded-lg border border-accent/20 bg-accent/5 p-3">
                <p className="text-xs font-semibold text-accent uppercase tracking-wide">Recommendation</p>
                <p className="mt-1.5 text-sm text-foreground">{tradeoff.recommendation}</p>
              </div>
            </div>

{!isDecided ? (
              <div className="mt-4 flex gap-3">
                <Button
                  onClick={() => handleApprove(tradeoff.id)}
                  size="sm"
                  className="flex-1 gap-2 bg-success text-success-foreground hover:bg-success/90 rounded-lg"
                >
                  <CheckCircle2 className="h-4 w-4" />
                  Approve
                </Button>
                <Button
                  onClick={() => handleReject(tradeoff.id)}
                  size="sm"
                  variant="outline"
                  className="flex-1 gap-2 rounded-lg border border-border"
                >
                  <XCircle className="h-4 w-4" />
                  Reject
                </Button>
              </div>
            ) : (
              <div className="mt-4 flex items-center gap-2 rounded-lg bg-muted px-3 py-2 text-sm text-muted-foreground">
                <ThumbsUp className="h-4 w-4" />
                {isApproved ? 'Approved' : 'Rejected'}
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/schedule-stats.tsx" isEdit="true" isMerged="true"
'use client'

import { Clock, Users, BarChart3, Zap } from 'lucide-react'

interface ScheduleStatsProps {
  totalHours: number
  employeeCount: number
  taskCount: number
  utilizationRate: number
}

export function ScheduleStats({ totalHours, employeeCount, taskCount, utilizationRate }: ScheduleStatsProps) {
  const stats = [
    {
      icon: Clock,
      label: 'Total Hours',
      value: totalHours.toString(),
      color: 'text-primary'
    },
    {
      icon: Users,
      label: 'Team Members',
      value: employeeCount.toString(),
      color: 'text-accent'
    },
    {
      icon: BarChart3,
      label: 'Tasks Scheduled',
      value: taskCount.toString(),
      color: 'text-success'
    },
    {
      icon: Zap,
      label: 'Utilization',
      value: `${utilizationRate}%`,
      color: 'text-warning'
    }
  ]

return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {stats.map((stat) => {
        const Icon = stat.icon
        return (
          <div key={stat.label} className="rounded-lg border border-border bg-card p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">{stat.label}</p>
                <p className="mt-2 text-2xl font-bold text-foreground">{stat.value}</p>
              </div>
              <div className={`rounded-lg bg-muted p-3 ${stat.color}`}>
                <Icon className="h-6 w-6" />
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/schedule-summary.tsx" isEdit="true" isMerged="true"
'use client'

import { CheckCircle2 } from 'lucide-react'

interface ScheduleSummaryProps {
  totalTasks: number
  aiRecommendations: number
  approvedRecommendations: number
  conflictsResolved: number
}

export function ScheduleSummary({
  totalTasks,
  aiRecommendations,
  approvedRecommendations,
  conflictsResolved
}: ScheduleSummaryProps) {
  return (
    <div className="rounded-lg border border-accent/20 bg-accent/5 p-6">
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h3 className="font-semibold text-foreground">Schedule Summary</h3>
          <CheckCircle2 className="h-5 w-5 text-success" />
        </div>

<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4">
          <div className="space-y-1">
            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Tasks Scheduled</p>
            <p className="text-2xl font-bold text-foreground">{totalTasks}</p>
          </div>

<div className="space-y-1">
            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Recommendations</p>
            <p className="text-2xl font-bold text-accent">{aiRecommendations}</p>
          </div>

<div className="space-y-1">
            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Approved</p>
            <p className="text-2xl font-bold text-success">{approvedRecommendations}</p>
          </div>

<div className="space-y-1">
            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Conflicts Resolved</p>
            <p className="text-2xl font-bold text-primary">{conflictsResolved}</p>
          </div>
        </div>

<div className="flex items-center gap-2 rounded-lg bg-success/10 p-3 text-sm text-success">
          <CheckCircle2 className="h-4 w-4 flex-shrink-0" />
          <p>Your schedule is optimized and ready for execution.</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/export-section.tsx" isEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { FileText, Download } from 'lucide-react'

interface ExportSectionProps {
  onExportPDF?: () => void
  onExportCSV?: () => void
}

export function ExportSection({ onExportPDF, onExportCSV }: ExportSectionProps) {
  const [isExporting, setIsExporting] = useState(false)
  const [exportFormat, setExportFormat] = useState<'pdf' | 'csv' | null>(null)

const handleExport = async (format: 'pdf' | 'csv') => {
    setIsExporting(true)
    setExportFormat(format)

try {
      await new Promise(resolve => setTimeout(resolve, 1500))

if (format === 'pdf' && onExportPDF) {
        onExportPDF()
      } else if (format === 'csv' && onExportCSV) {
        onExportCSV()
      }
    } finally {
      setIsExporting(false)
      setExportFormat(null)
    }
  }

return (
    <div className="rounded-lg border border-border bg-card p-6">
      <div className="space-y-4">
        <div>
          <h3 className="font-semibold text-foreground">Export Your Schedule</h3>
          <p className="mt-1 text-sm text-muted-foreground">
            Download your finalized schedule in your preferred format for sharing and printing.
          </p>
        </div>

<div className="grid gap-3 sm:grid-cols-2">
          <Button
            onClick={() => handleExport('pdf')}
            disabled={isExporting}
            className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg py-2.5"
          >
            {isExporting && exportFormat === 'pdf' ? (
              <>
                <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></div>
                Exporting...
              </>
            ) : (
              <>
                <FileText className="h-4 w-4" />
                Export as PDF
              </>
            )}
          </Button>

<Button
            onClick={() => handleExport('csv')}
            disabled={isExporting}
            variant="outline"
            className="gap-2 rounded-lg border border-border py-2.5"
          >
            {isExporting && exportFormat === 'csv' ? (
              <>
                <div className="h-4 w-4 animate-spin rounded-full border-2 border-foreground border-t-transparent"></div>
                Exporting...
              </>
            ) : (
              <>
                <Download className="h-4 w-4" />
                Export as CSV
              </>
            )}
          </Button>
        </div>

<div className="rounded-lg bg-muted p-3 text-xs text-muted-foreground space-y-1.5">
          <p>
            <span className="font-medium text-foreground">PDF includes:</span> Full schedule grid, AI recommendations summary, resource allocation chart
          </p>
          <p>
            <span className="font-medium text-foreground">CSV includes:</span> All task details, employee assignments, time allocations (can import to Excel/Sheets)
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/loading-overlay.tsx" isEdit="true" isMerged="true"
'use client'

import { LoadingSpinner } from '@/components/loading-spinner'

interface LoadingOverlayProps {
  isLoading: boolean
  message?: string
}

export function LoadingOverlay({ isLoading, message = 'Processing...' }: LoadingOverlayProps) {
  if (!isLoading) return null

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
      <div className="w-full max-w-sm rounded-2xl border border-border bg-card p-8 text-center">
        <LoadingSpinner />
        <p className="mt-4 text-sm font-medium text-foreground">{message}</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
'use client'

import { useState } from 'react'
import { CSVPreview } from '@/components/csv-preview'
import { TaskCreationForm } from '@/components/task-creation-form'
import { QueuedTasksList } from '@/components/queued-tasks-list'
import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'

export default function IntakePage() {
  const router = useRouter()
  const [employeeCsv, setEmployeeCsv] = useState<File | null>(null)
  const [tasksCsv, setTasksCsv] = useState<File | null>(null)
  const [queuedTasks, setQueuedTasks] = useState<any[]>([])
  const [activeSection, setActiveSection] = useState<'upload' | 'create' | 'queue'>('upload')

const handleAddTask = (task: any) => {
    setQueuedTasks([...queuedTasks, { ...task, id: Date.now() }])
    setActiveSection('queue')
  }

const handleRemoveTask = (taskId: number) => {
    setQueuedTasks(queuedTasks.filter(t => t.id !== taskId))
  }

const handleStartScheduling = async () => {
    const scheduleData = {
      employees: employeeCsv ? await parseCSV(employeeCsv) : [],
      tasks: tasksCsv ? await parseCSV(tasksCsv) : [],
      queuedTasks
    }
    sessionStorage.setItem('scheduleData', JSON.stringify(scheduleData))
    router.push('/review')
  }

return (
    <div className="min-h-screen bg-background">
      {/* Main Container */}
      <div className="mx-auto w-full max-w-2xl px-4 py-12 sm:px-6 lg:px-8">
        
        {/* Upload Section - Only visible when activeSection is 'upload' */}
        {activeSection === 'upload' && (
          <div className="rounded-2xl border border-border bg-card p-8 sm:p-12">
            <h1 className="text-center text-3xl font-bold text-foreground mb-8">Upload Employee & Task Files</h1>

<div className="space-y-8">
              {/* Employee CSV Upload */}
              <div>
                <h2 className="text-lg font-semibold text-foreground mb-4">Upload Employee CSV</h2>
                <label className="block">
                  <input
                    type="file"
                    accept=".csv"
                    onChange={(e) => {
                      const file = e.target.files?.[0]
                      if (file) setEmployeeCsv(file)
                    }}
                    className="hidden"
                  />
                  <div className="flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-muted bg-background/50 px-6 py-8 text-center hover:border-border transition-colors">
                    <span className="text-muted-foreground">Choose a CSV file or drag and drop</span>
                  </div>
                </label>
                {employeeCsv && (
                  <p className="mt-3 text-sm text-foreground">
                    <span className="text-success">✓</span> {employeeCsv.name}
                  </p>
                )}
                <p className="mt-2 text-xs text-muted-foreground">Only CSV files are allowed.</p>
              </div>

{/* Task CSV Upload */}
              <div>
                <h2 className="text-lg font-semibold text-foreground mb-4">Upload Task CSV</h2>
                <label className="block">
                  <input
                    type="file"
                    accept=".csv"
                    onChange={(e) => {
                      const file = e.target.files?.[0]
                      if (file) setTasksCsv(file)
                    }}
                    className="hidden"
                  />
                  <div className="flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-muted bg-background/50 px-6 py-8 text-center hover:border-border transition-colors">
                    <span className="text-muted-foreground">Choose a CSV file or drag and drop</span>
                  </div>
                </label>
                {tasksCsv && (
                  <p className="mt-3 text-sm text-foreground">
                    <span className="text-success">✓</span> {tasksCsv.name}
                  </p>
                )}
                <p className="mt-2 text-xs text-muted-foreground">Only CSV files are allowed.</p>
              </div>

{/* CSV Previews */}
              {employeeCsv && (
                <div className="mt-6 pt-6 border-t border-border">
                  <CSVPreview file={employeeCsv} title="Employee Data Preview" />
                </div>
              )}
              {tasksCsv && (
                <div className="mt-6 pt-6 border-t border-border">
                  <CSVPreview file={tasksCsv} title="Tasks Data Preview" />
                </div>
              )}

{/* Continue Button */}
              <Button
                onClick={() => setActiveSection('create')}
                disabled={!employeeCsv || !tasksCsv}
                className="w-full bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed py-3 text-base font-medium rounded-lg"
              >
                Continue
              </Button>
            </div>
          </div>
        )}

{/* Create Tasks Section */}
        {activeSection === 'create' && (
          <div className="rounded-2xl border border-border bg-card p-8 sm:p-12">
            <div className="mb-6 flex items-center justify-between">
              <h1 className="text-3xl font-bold text-foreground">Create Tasks</h1>
              <button
                onClick={() => setActiveSection('upload')}
                className="text-sm text-muted-foreground hover:text-foreground"
              >
                ← Back
              </button>
            </div>
            <TaskCreationForm onAddTask={handleAddTask} />
          </div>
        )}

{/* Queue Section */}
        {activeSection === 'queue' && (
          <div className="rounded-2xl border border-border bg-card p-8 sm:p-12">
            <div className="mb-8">
              <h1 className="text-3xl font-bold text-foreground">Queued Tasks</h1>
              <p className="mt-2 text-muted-foreground">
                {queuedTasks.length} task{queuedTasks.length !== 1 ? 's' : ''} ready for scheduling
              </p>
            </div>

<div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button
                onClick={() => setActiveSection('create')}
                variant="outline"
                className="flex-1 py-3 text-base font-medium"
              >
                Add More Tasks
              </Button>
              <Button
                onClick={handleStartScheduling}
                disabled={queuedTasks.length === 0}
                className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed py-3 text-base font-medium"
              >
                Start Scheduling
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

function parseCSV(file: File): Promise<any[]> {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onload = (e) => {
      const text = e.target?.result as string
      const lines = text.split('\n').filter(line => line.trim())
      const headers = lines[0].split(',').map(h => h.trim())
      const data = lines.slice(1).map(line => {
        const values = line.split(',').map(v => v.trim())
        const obj: any = {}
        headers.forEach((header, i) => {
          obj[header] = values[i]
        })
        return obj
      })
      resolve(data)
    }
    reader.readAsText(file)
  })
}</article></body></html>