[V0_FILE]typescriptreact:file="src/interfaces/User.ts" export interface User { id: string name: string email: string avatar?: string isActive: boolean } export interface UserGroup { id: string name: string description?: string members: User[] isActive: boolean } export interface WorkItem { id: string name: string type: string category: string } [V0_FILE]typescriptreact:file="src/interfaces/ApiResponse.ts" export interface ApiResponse { success: boolean data?: T error?: string message?: string } export interface PaginatedResponse { success: boolean data: T[] pagination: { page: number limit: number total: number totalPages: number } error?: string } [V0_FILE]typescript:file="src/constants/routes.ts" isQuickEdit="true" export const ROUTES = { HOME: "/", TASKS: "/tasks", TASK_CREATE: "/tasks/new", TASK_VIEW: (id: string) => `/tasks/${id}`, TASK_EDIT: (id: string) => `/tasks/${id}/edit`, } as const export const API_ENDPOINTS = { TASKS: "/api/tasks", TASK_BY_ID: (id: string) => `/api/tasks/${id}`, USERS: "/api/users", USER_GROUPS: "/api/user-groups", WORK_ITEMS: "/api/work-items", } as const [V0_FILE]typescriptreact:file="src/utils/date-helpers.ts" import { DEFAULT_VALUES } from "../constants/task-constants" export function formatDate(date: Date | string): string { const d = new Date(date) return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } export function formatDateTime(date: Date | string): string { const d = new Date(date) return d.toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } export function getDefaultDueDate(): Date { const date = new Date() date.setDate(date.getDate() + DEFAULT_VALUES.DAYS_AHEAD) date.setHours(10, 0, 0, 0) // 10:00 AM return date } export function getDefaultNotifyDate(): Date { return getDefaultDueDate() } export function isValidFutureDate(date: Date): boolean { const today = new Date() today.setHours(0, 0, 0, 0) return date >= today } export function isDateInRange(date: Date, start?: Date, end?: Date): boolean { if (start && date < start) return false if (end && date > end) return false return true } export function getDaysUntilDue(dueDate: Date): number { const today = new Date() today.setHours(0, 0, 0, 0) const due = new Date(dueDate) due.setHours(0, 0, 0, 0) const diffTime = due.getTime() - today.getTime() return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="src/components/task-status-badge.tsx" import type { TaskStatus } from "../interfaces/Task" import { Badge } from "@/components/ui/badge" import { getTaskStatusColor } from "../utils/task-helpers" interface TaskStatusBadgeProps { status: TaskStatus className?: string } export default function TaskStatusBadge({ status, className }: TaskStatusBadgeProps) { const getStatusVariant = (status: TaskStatus) => { switch (status) { case "Completed": return "default" case "In Progress": return "secondary" case "In Review": return "outline" case "Cancelled": return "destructive" default: return "secondary" } } return ( {status} ) } [V0_FILE]typescriptreact:file="src/components/task-priority-badge.tsx" import type { TaskPriority } from "../interfaces/Task" import { Badge } from "@/components/ui/badge" import { getTaskPriorityColor } from "../utils/task-helpers" import { AlertTriangle, Minus, ArrowDown } from "lucide-react" interface TaskPriorityBadgeProps { priority: TaskPriority showIcon?: boolean className?: string } export default function TaskPriorityBadge({ priority, showIcon = true, className }: TaskPriorityBadgeProps) { const getPriorityIcon = (priority: TaskPriority) => { switch (priority) { case "High": return case "Normal": return case "Low": return } } const getPriorityVariant = (priority: TaskPriority) => { switch (priority) { case "High": return "destructive" case "Normal": return "secondary" case "Low": return "outline" } } return ( {showIcon && getPriorityIcon(priority)} {priority} ) } [V0_FILE]typescriptreact:file="src/api/users.ts" import type { User, UserGroup, ApiResponse } from "../interfaces/User" // Mock API functions for user management export async function getUsers(): Promise> { await new Promise((resolve) => setTimeout(resolve, 500)) const users: User[] = [ { id: "user-1", name: "John Smith", email: "john.smith@company.com", avatar: "/professional-headshot.png", isActive: true, }, { id: "user-2", name: "Sarah Johnson", email: "sarah.johnson@company.com", avatar: "/professional-headshot.png", isActive: true, }, { id: "user-3", name: "Mike Davis", email: "mike.davis@company.com", avatar: "/professional-headshot.png", isActive: true, }, { id: "user-4", name: "Emily Chen", email: "emily.chen@company.com", avatar: "/professional-headshot.png", isActive: true, }, { id: "user-5", name: "David Wilson", email: "david.wilson@company.com", avatar: "/professional-headshot.png", isActive: false, }, ] return { success: true, data: users.filter((user) => user.isActive), } } export async function getUserGroups(): Promise> { await new Promise((resolve) => setTimeout(resolve, 500)) const userGroups: UserGroup[] = [ { id: "group-1", name: "Compliance Team", description: "Handles all compliance and regulatory tasks", members: [], isActive: true, }, { id: "group-2", name: "Sales Team", description: "Sales representatives and account managers", members: [], isActive: true, }, { id: "group-3", name: "Legal Team", description: "Legal counsel and contract specialists", members: [], isActive: true, }, { id: "group-4", name: "Finance Team", description: "Financial analysts and accounting staff", members: [], isActive: true, }, { id: "group-5", name: "Operations Team", description: "Operations and process management", members: [], isActive: true, }, ] return { success: true, data: userGroups.filter((group) => group.isActive), } } export async function searchUsers(query: string): Promise> { await new Promise((resolve) => setTimeout(resolve, 300)) const response = await getUsers() if (!response.success || !response.data) { return { success: false, error: "Failed to search users" } } const filteredUsers = response.data.filter( (user) => user.name.toLowerCase().includes(query.toLowerCase()) || user.email.toLowerCase().includes(query.toLowerCase()), ) return { success: true, data: filteredUsers, } } export async function searchUserGroups(query: string): Promise> { await new Promise((resolve) => setTimeout(resolve, 300)) const response = await getUserGroups() if (!response.success || !response.data) { return { success: false, error: "Failed to search user groups" } } const filteredGroups = response.data.filter( (group) => group.name.toLowerCase().includes(query.toLowerCase()) || (group.description && group.description.toLowerCase().includes(query.toLowerCase())), ) return { success: true, data: filteredGroups, } } [V0_FILE]typescriptreact:file="src/api/work-items.ts" import type { WorkItem, ApiResponse } from "../interfaces/User" // Mock API functions for work item management export async function getWorkItems(): Promise> { await new Promise((resolve) => setTimeout(resolve, 500)) const workItems: WorkItem[] = [ { id: "contract-1", name: "Enterprise Contract #2024-001", type: "Contract", category: "Legal", }, { id: "contract-2", name: "Service Agreement #2024-002", type: "Contract", category: "Legal", }, { id: "quote-1", name: "Q4 Pricing Quote - Acme Corp", type: "Quote", category: "Sales", }, { id: "quote-2", name: "Enterprise Software Quote", type: "Quote", category: "Sales", }, { id: "order-1", name: "Order #ORD-2024-456", type: "Order", category: "Fulfillment", }, { id: "order-2", name: "Renewal Order #ORD-2024-789", type: "Order", category: "Fulfillment", }, { id: "proposal-1", name: "Strategic Partnership Proposal", type: "Proposal", category: "Business Development", }, { id: "amendment-1", name: "Contract Amendment #AMD-2024-001", type: "Amendment", category: "Legal", }, ] return { success: true, data: workItems, } } export async function searchWorkItems(query: string, type?: string): Promise> { await new Promise((resolve) => setTimeout(resolve, 300)) const response = await getWorkItems() if (!response.success || !response.data) { return { success: false, error: "Failed to search work items" } } let filteredItems = response.data.filter((item) => item.name.toLowerCase().includes(query.toLowerCase())) if (type) { filteredItems = filteredItems.filter((item) => item.type.toLowerCase() === type.toLowerCase()) } return { success: true, data: filteredItems, } } export async function getWorkItemsByType(type: string): Promise> { await new Promise((resolve) => setTimeout(resolve, 300)) const response = await getWorkItems() if (!response.success || !response.data) { return { success: false, error: "Failed to get work items" } } const filteredItems = response.data.filter((item) => item.type.toLowerCase() === type.toLowerCase()) return { success: true, data: filteredItems, } } [V0_FILE]typescriptreact:file="src/utils/validation.ts" import type { TaskFormData, TaskFormErrors } from "../interfaces/Task" import { CHARACTER_LIMITS, FIELD_AVAILABILITY } from "../constants/task-constants" import { isValidFutureDate } from "./date-helpers" export function validateTaskForm(data: TaskFormData): TaskFormErrors { const errors: TaskFormErrors = {} // Title validation if (!data.title.trim()) { errors.title = "Title is required" } else if (data.title.length > CHARACTER_LIMITS.TITLE) { errors.title = `Title must be ${CHARACTER_LIMITS.TITLE} characters or less` } // Assignee validation if (!data.assignee.trim()) { errors.assignee = "Assignee is required" } // Submission trigger validation if (data.submissionTrigger !== "Manual" && !data.assignee.trim()) { errors.assignee = "Assignee is required when submission trigger is not Manual" } // Date validations based on task type const availableFields = FIELD_AVAILABILITY[data.taskType] || [] if (availableFields.includes("dueDate") && data.dueDate) { if (!isValidFutureDate(data.dueDate)) { errors.dueDate = "Due date cannot be in the past" } } if (availableFields.includes("notifyOn") && data.notifyOn) { if (!isValidFutureDate(data.notifyOn)) { errors.notifyOn = "Notify date cannot be in the past" } } if (data.estimatedStartDate && data.dueDate && data.estimatedStartDate > data.dueDate) { errors.estimatedStartDate = "Estimated start date cannot be later than due date" } // Notes validation if (data.notes && data.notes.length > CHARACTER_LIMITS.NOTES) { errors.notes = `Notes must be ${CHARACTER_LIMITS.NOTES} characters or less` } // Task group validation if (data.taskGroup && data.taskGroup.length > CHARACTER_LIMITS.TASK_GROUP) { errors.taskGroup = `Task group must be ${CHARACTER_LIMITS.TASK_GROUP} characters or less` } return errors } export function validateEmail(email: string): boolean { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } export function validateRequired(value: string | undefined | null): boolean { return Boolean(value && value.trim().length > 0) } export function validateLength(value: string, maxLength: number): boolean { return value.length <= maxLength } export function validateDateRange(startDate: Date, endDate: Date): boolean { return startDate <= endDate } export function sanitizeInput(input: string): string { return input.trim().replace(/[<>]/g, "") } [V0_FILE]typescriptreact:file="src/utils/export.ts" import type { Task } from "../interfaces/Task" import { formatDate, formatDateTime } from "./date-helpers" export function exportTasksToCSV(tasks: Task[]): string { const headers = [ "ID", "Title", "Priority", "Task Type", "Status", "Assignee", "Due Date", "Created By", "Created On", "Task Group", "Notes", ] const rows = tasks.map((task) => [ task.id, `"${task.title.replace(/"/g, '""')}"`, // Escape quotes in CSV task.priority, task.taskType, task.status, task.assignee, task.dueDate ? formatDate(task.dueDate) : "", task.createdBy, formatDateTime(task.createdOn), task.taskGroup || "", task.notes ? `"${task.notes.replace(/"/g, '""')}"` : "", ]) const csvContent = [headers.join(","), ...rows.map((row) => row.join(","))].join("\n") return csvContent } export function downloadCSV(content: string, filename: string): void { const blob = new Blob([content], { type: "text/csv;charset=utf-8;" }) const link = document.createElement("a") if (link.download !== undefined) { const url = URL.createObjectURL(blob) link.setAttribute("href", url) link.setAttribute("download", filename) link.style.visibility = "hidden" document.body.appendChild(link) link.click() document.body.removeChild(link) } } export function exportTasksToJSON(tasks: Task[]): string { return JSON.stringify(tasks, null, 2) } export function downloadJSON(content: string, filename: string): void { const blob = new Blob([content], { type: "application/json;charset=utf-8;" }) const link = document.createElement("a") if (link.download !== undefined) { const url = URL.createObjectURL(blob) link.setAttribute("href", url) link.setAttribute("download", filename) link.style.visibility = "hidden" document.body.appendChild(link) link.click() document.body.removeChild(link) } } [V0_FILE]typescriptreact:file="src/utils/notifications.ts" import type { Task } from "../interfaces/Task" export interface NotificationSettings { inApp: boolean email: boolean dueDateReminders: boolean statusUpdates: boolean assignments: boolean } export function shouldNotifyUser(task: Task, currentUserId: string, settings: NotificationSettings): boolean { // Don't notify for own actions if (task.modifiedBy === currentUserId) { return false } // Check if user is assigned to the task const isAssigned = task.assigneeId === currentUserId // Check notification settings if (!settings.inApp && !settings.email) { return false } return isAssigned } export function getNotificationMessage(task: Task, action: string): string { switch (action) { case "created": return `New task "${task.title}" has been assigned to you` case "updated": return `Task "${task.title}" has been updated` case "status_changed": return `Task "${task.title}" status changed to ${task.status}` case "due_soon": return `Task "${task.title}" is due soon` case "overdue": return `Task "${task.title}" is overdue` case "completed": return `Task "${task.title}" has been completed` default: return `Task "${task.title}" has been updated` } } export function scheduleNotification(task: Task, type: "due_reminder" | "overdue"): void { // Mock notification scheduling console.log(`[Notification] Scheduled ${type} notification for task: ${task.title}`) } export function sendInAppNotification(message: string, userId: string): void { // Mock in-app notification console.log(`[In-App Notification] ${userId}: ${message}`) } export function sendEmailNotification(message: string, userEmail: string): void { // Mock email notification console.log(`[Email Notification] ${userEmail}: ${message}`) } [V0_FILE]typescriptreact:file="src/hooks/use-tasks.ts" "use client" import { useState, useEffect, useCallback } from "react" import type { Task, TaskFilters, TaskSortOptions, PaginatedResponse } from "../interfaces/Task" import { getTasks } from "../api/tasks" interface UseTasksOptions { initialFilters?: TaskFilters initialSort?: TaskSortOptions pageSize?: number autoRefresh?: boolean refreshInterval?: number } export function useTasks(options: UseTasksOptions = {}) { const { initialFilters = {}, initialSort = { field: "dueDate", direction: "asc" }, pageSize = 12, autoRefresh = false, refreshInterval = 30000, // 30 seconds } = options const [tasks, setTasks] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [filters, setFilters] = useState(initialFilters) const [sortOptions, setSortOptions] = useState(initialSort) const [pagination, setPagination] = useState({ page: 1, limit: pageSize, total: 0, totalPages: 0, }) const loadTasks = useCallback(async () => { try { setError(null) const response: PaginatedResponse = await getTasks(filters, sortOptions, pagination.page, pagination.limit) if (response.success) { setTasks(response.data) setPagination(response.pagination) } else { setError(response.error || "Failed to load tasks") } } catch (err) { setError("Failed to load tasks") console.error("Error loading tasks:", err) } finally { setLoading(false) } }, [filters, sortOptions, pagination.page, pagination.limit]) const refresh = useCallback(() => { setLoading(true) loadTasks() }, [loadTasks]) const updateFilters = useCallback((newFilters: TaskFilters) => { setFilters(newFilters) setPagination((prev) => ({ ...prev, page: 1 })) }, []) const updateSort = useCallback((newSort: TaskSortOptions) => { setSortOptions(newSort) setPagination((prev) => ({ ...prev, page: 1 })) }, []) const goToPage = useCallback((page: number) => { setPagination((prev) => ({ ...prev, page })) }, []) const clearFilters = useCallback(() => { setFilters({}) setPagination((prev) => ({ ...prev, page: 1 })) }, []) // Initial load useEffect(() => { loadTasks() }, [loadTasks]) // Auto refresh useEffect(() => { if (!autoRefresh) return const interval = setInterval(() => { loadTasks() }, refreshInterval) return () => clearInterval(interval) }, [autoRefresh, refreshInterval, loadTasks]) return { tasks, loading, error, filters, sortOptions, pagination, refresh, updateFilters, updateSort, goToPage, clearFilters, } } [V0_FILE]typescriptreact:file="src/hooks/use-task.ts" "use client" import { useState, useEffect, useCallback } from "react" import type { Task } from "../interfaces/Task" import { getTask } from "../api/tasks" export function useTask(taskId: string | null) { const [task, setTask] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const loadTask = useCallback(async () => { if (!taskId) { setLoading(false) return } try { setError(null) setLoading(true) const response = await getTask(taskId) if (response.success && response.data) { setTask(response.data) } else { setError(response.error || "Task not found") } } catch (err) { setError("Failed to load task") console.error("Error loading task:", err) } finally { setLoading(false) } }, [taskId]) const refresh = useCallback(() => { loadTask() }, [loadTask]) useEffect(() => { loadTask() }, [loadTask]) return { task, loading, error, refresh, } } [V0_FILE]typescriptreact:file="src/constants/error-messages.ts" export const ERROR_MESSAGES = { // General errors NETWORK_ERROR: "Network error. Please check your connection and try again.", UNKNOWN_ERROR: "An unexpected error occurred. Please try again.", PERMISSION_DENIED: "You don't have permission to perform this action.", // Task errors TASK_NOT_FOUND: "Task not found or has been deleted.", TASK_CREATE_FAILED: "Failed to create task. Please try again.", TASK_UPDATE_FAILED: "Failed to update task. Please try again.", TASK_DELETE_FAILED: "Failed to delete task. Please try again.", // Validation errors REQUIRED_FIELD: "This field is required.", INVALID_EMAIL: "Please enter a valid email address.", INVALID_DATE: "Please enter a valid date.", DATE_IN_PAST: "Date cannot be in the past.", START_DATE_AFTER_END: "Start date cannot be after end date.", CHARACTER_LIMIT_EXCEEDED: "Character limit exceeded.", // User errors USER_NOT_FOUND: "User not found.", INVALID_ASSIGNEE: "Please select a valid assignee.", // File errors FILE_TOO_LARGE: "File size exceeds the maximum limit.", INVALID_FILE_TYPE: "File type is not supported.", UPLOAD_FAILED: "File upload failed. Please try again.", // Comment errors COMMENT_ADD_FAILED: "Failed to add comment. Please try again.", COMMENT_EMPTY: "Comment cannot be empty.", } as const export const SUCCESS_MESSAGES = { TASK_CREATED: "Task created successfully.", TASK_UPDATED: "Task updated successfully.", TASK_DELETED: "Task deleted successfully.", COMMENT_ADDED: "Comment added successfully.", FILE_UPLOADED: "File uploaded successfully.", SETTINGS_SAVED: "Settings saved successfully.", } as const [V0_FILE]png:file="public/professional-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-MVQzBgqCWCm5OITNqIsbe1y1jZinpg.png" [V0_FILE]typescriptreact:file="src/utils/performance.ts" isFixed="true" isQuickEdit="true" "use client" import { useCallback, useRef } from "react" export function useDebounce any>(callback: T, delay: number) { const timeoutRef = useRef() return useCallback( (...args: Parameters) => { if (timeoutRef.current) { clearTimeout(timeoutRef.current) } timeoutRef.current = setTimeout(() => callback(...args), delay) }, [callback, delay], ) } export function throttle any>(func: T, limit: number) { let inThrottle = false return (...args: Parameters) => { if (!inThrottle) { func(...args) inThrottle = true setTimeout(() => (inThrottle = false), limit) } } } export const storage = { get: (key: string, defaultValue: T): T => {\ try {\ const item = localStorage.getItem(key) return item ? JSON.parse(item) : defaultValue } catch {\ return defaultValue } }, set: (key: string, value: T): void => {\ try { localStorage.setItem(key, JSON.stringify(value)) } catch (error) { console.warn("Failed to save to localStorage:", error) } }, remove: (key: string): void => {\ try { localStorage.removeItem(key) } catch (error) { console.warn("Failed to remove from localStorage:", error) } }, } \ export function memoize any>(fn: T): T {\ const cache = new Map() return ((...args: Parameters) => {\ const key = JSON.stringify(args) if (cache.has(key)) {\ return cache.get(key) } const result = fn(...args) cache.set(key, result) return result }) as T\ } [V0_FILE]css:file="app/globals-conga.css" @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"); @import "tailwindcss"; @source "../../../apps/**/*.{ts,tsx}"; @source "../../../components/**/*.{ts,tsx}"; @source "../**/*.{ts,tsx}"; @source "../../../packages/blocks/**/*.{ts,tsx}"; @custom-variant dark (&:is(.dark *)); @tailwind base; @tailwind components; @tailwind utilities; /* * This block contains color palette tokens from Figma. Colors that use alpha values are represented in rgba format for * precision (the hex alpha channel cannot represent all integer percentages). */ @theme { --color-brand-100: #e1efff; --color-brand-200: #c9e2ff; --color-brand-300: #93c5ff; --color-brand-400: #5ea9fe; --color-brand-500: #288cfe; --color-brand-600: #0170ef; --color-brand-700: #015abf; --color-brand-800: #01438f; --color-brand-900: #002d60; --color-brand-1000: #001630; --color-green-100: #dcfce7; --color-green-200: #b9f8cf; --color-green-300: #7af2a8; --color-green-400: #06df73; --color-green-500: #00c950; --color-green-600: #00a63e; --color-green-700: #016730; --color-green-800: #0e542b; --color-green-900: #084021; --color-green-1000: #032e16; --color-yellow-100: #fefce8; --color-yellow-200: #fef9c2; --color-yellow-300: #fff085; --color-yellow-400: #ffdf20; --color-yellow-500: #fdc700; --color-yellow-600: #d08700; --color-yellow-700: #a65f00; --color-yellow-800: #894b00; --color-yellow-900: #733e0a; --color-yellow-1000: #432004; --color-red-100: #fef2f2; --color-red-200: #ffe2e2; --color-red-300: #ffc9c9; --color-red-300A: rgba(255, 209, 209, 0.5); --color-red-400: #ff6467; --color-red-500: #fb2c36; --color-red-600: #e7000b; --color-red-700: #c10007; --color-red-800: #9f0712; --color-red-900: #82181a; --color-red-900A: rgba(149, 0, 0, 0.5); --color-red-1000: #460809; --color-blueharbor-100: #e3fafe; --color-blueharbor-200: #c6f5fd; --color-blueharbor-300: #8decfc; --color-blueharbor-400: #55e2fa; --color-blueharbor-500: #07cef0; --color-blueharbor-600: #06b6d4; --color-blueharbor-700: #0592aa; --color-blueharbor-800: #046d7f; --color-blueharbor-900: #024955; --color-blueharbor-1000: #01242a; --color-orange-100: #ffedd4; --color-orange-200: #ffd6a7; --color-orange-300: #ffb86a; --color-orange-400: #ff8904; --color-orange-500: #ff6900; --color-orange-600: #f54900; --color-orange-700: #ca3500; --color-orange-800: #9f2d00; --color-orange-900: #7e2a0c; --color-orange-1000: #441306; --color-pink-100: #fce7f3; --color-pink-200: #fccee8; --color-pink-300: #fda5d5; --color-pink-400: #fb64b6; --color-pink-500: #f6339a; --color-pink-600: #e60076; --color-pink-700: #c6005c; --color-pink-800: #a3004c; --color-pink-900: #861043; --color-pink-1000: #510424; --color-fuchsia-100: #fae8ff; --color-fuchsia-200: #f6cfff; --color-fuchsia-300: #f4a8ff; --color-fuchsia-400: #ed6aff; --color-fuchsia-500: #e12afb; --color-fuchsia-600: #c800de; --color-fuchsia-700: #a800b7; --color-fuchsia-800: #8a0194; --color-fuchsia-900: #721378; --color-fuchsia-1000: #4b004f; --color-violet-100: #ede9fe; --color-violet-200: #ddd6ff; --color-violet-300: #c4b4ff; --color-violet-400: #a684ff; --color-violet-500: #8e51ff; --color-violet-600: #7f22fe; --color-violet-700: #7008e7; --color-violet-800: #5d0ec0; --color-violet-900: #4d179a; --color-violet-1000: #2f0d68; --color-teal-100: #cbfbf1; --color-teal-200: #96f7e4; --color-teal-300: #46ecd5; --color-teal-400: #00d5be; --color-teal-500: #00bba7; --color-teal-600: #009689; --color-teal-700: #00786f; --color-teal-800: #005f5a; --color-teal-900: #0b4f4a; --color-teal-1000: #073431; --color-lime-100: #f7fee7; --color-lime-200: #d8f999; --color-lime-300: #bbf451; --color-lime-400: #9ae600; --color-lime-500: #7ccf00; --color-lime-600: #5ea500; --color-lime-700: #497d00; --color-lime-800: #3c6300; --color-lime-900: #35530e; --color-lime-1000: #192e03; --color-blue-100: #e1efff; --color-blue-200: #c9e2ff; --color-blue-300: #93c5ff; --color-blue-400: #5ea9fe; --color-blue-500: #288cfe; --color-blue-600: #0170ef; --color-blue-700: #015abf; --color-blue-800: #01438f; --color-blue-900: #002d60; --color-blue-1000: #001630; --color-neutral-immutable-0: #ffffff; --color-neutral-immutable-700: #2c333a; --color-neutral-immutable-900: #1d2125; /* Themed colors – These are defined outside the light/dark blocks to ensure both sets are available globally in Tailwind */ --color-neutral-0: #ffffff; --color-neutral-100: #f8f8f8; --color-neutral-200: #f4f4f4; --color-neutral-300: #dcdfe4; --color-neutral-400: #b3b9c4; --color-neutral-500: #8590a2; --color-neutral-600: #758195; --color-neutral-700: #626f86; --color-neutral-800: #44546f; --color-neutral-900: #2c3e5d; --color-neutral-1000: #172b4d; --color-neutral-1100: #091e42; --color-neutral-0A: rgba(0, 0, 0, 0); --color-neutral-100A: rgba(9, 30, 66, 0.03); --color-neutral-200A: rgba(9, 30, 66, 0.06); --color-neutral-300A: rgba(9, 30, 66, 0.14); --color-neutral-400A: rgba(9, 30, 66, 0.31); --color-neutral-500A: rgba(9, 30, 66, 0.49); --color-neutral-dark--100: #101214; /* -100 (negative 100) */ --color-neutral-dark-0: #161a1d; --color-neutral-dark-100: #1d2125; --color-neutral-dark-200: #22272b; --color-neutral-dark-250: #282e33; --color-neutral-dark-300: #2c333a; --color-neutral-dark-350: #38414a; --color-neutral-dark-400: #454f59; --color-neutral-dark-500: #596773; --color-neutral-dark-600: #738496; --color-neutral-dark-700: #8c9bab; --color-neutral-dark-800: #9fadbc; --color-neutral-dark-900: #b6c2cf; --color-neutral-dark-1000: #c7d1db; --color-neutral-dark-1100: #dee4ea; --color-neutral-dark--100A: rgba(3, 4, 4, 0.26); /* -100A (negative 100 alpha) */ --color-neutral-dark--200A: rgba(16, 18, 20, 0.7); /* -200A (negative 200 alpha) */ --color-neutral-dark-0A: rgba(0, 0, 0, 0); --color-neutral-dark-100A: rgba(188, 214, 240, 0.04); --color-neutral-dark-200A: rgba(161, 189, 217, 0.08); --color-neutral-dark-250A: rgba(200, 225, 249, 0.01); --color-neutral-dark-300A: rgba(166, 197, 226, 0.16); --color-neutral-dark-350A: rgba(195, 222, 254, 0.02); --color-neutral-dark-400A: rgba(191, 219, 248, 0.28); --color-neutral-dark-500A: rgba(155, 180, 202, 0.5); } /* Light */ :root { /* shadcn out-of-the-box variables – these will be gradually removed as we apply PDS component styles */ --background: var(--bg-accent-gray-softer); --foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --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); /* PDS tokens (ordering is based on Figma) */ /* Text */ --text-accent-blueharbor: var(--color-blueharbor-800); --text-accent-blueharbor-bolder: var(--color-blueharbor-900); --text-accent-fuchsia: var(--color-fuchsia-800); --text-accent-fuchsia-bolder: var(--color-fuchsia-900); --text-accent-lime: var(--color-lime-800); --text-accent-lime-bolder: var(--color-lime-900); --text-accent-pink: var(--color-pink-800); --text-accent-pink-bolder: var(--color-pink-900); --text-accent-teal: var(--color-teal-800); --text-accent-teal-bolder: var(--color-teal-900); --text-accent-orange: var(--color-orange-800); --text-accent-orange-bolder: var(--color-orange-900); --text-accent-violet: var(--color-violet-800); --text-accent-violet-bolder: var(--color-violet-900); --text-success: var(--color-green-800); --text-warning: var(--color-yellow-800); --text-warning-inverse: var(--var-neutral-1000); --text-danger: var(--color-red-800); --text-information: var(--color-blue-700); --text-primary: var(--color-brand-600); --text-selected: var(--color-brand-800); --text-softer: var(--color-neutral-700); --text-soft: var(--color-neutral-800); --text: var(--color-neutral-1000); --text-disabled: var(--color-neutral-400A); --text-inverse: var(--color-neutral-0); --text-light-immutable: var(--color-neutral-immutable-0); --text-dark-immutable: var(--color-neutral-immutable-900); /* Link */ --link: var(--color-brand-600); --link-pressed: var(--color-brand-800); --link-visited: var(--color-violet-800); --link-visited-pressed: var(--color-violet-900); /* Icon */ --icon-accent-blueharbor: var(--color-blueharbor-700); --icon-accent-fuchsia: var(--color-fuchsia-700); --icon-accent-lime: var(--color-lime-700); --icon-accent-pink: var(--color-pink-700); --icon-accent-teal: var(--color-teal-700); --icon-accent-orange: var(--color-orange-700); --icon-accent-violet: var(--color-violet-700); --icon-success: var(--color-green-700); --icon-warning: var(--color-yellow-800); --icon-warning-inverse: var(--color-neutral-1000); --icon-danger: var(--color-red-800); --icon-info: var(--color-blue-600); --icon-primary: var(--color-brand-600); --icon-primary-selected: var(--color-brand-800); --icon-soft: var(--color-neutral-700); --icon: var(--color-neutral-900); --icon-selected: var(--color-neutral-1000); --icon-disabled: var(--color-neutral-400A); --icon-inverse: var(--color-neutral-0); --icon-light-immutable: var(--color-neutral-immutable-0); --icon-dark-immutable: var(--color-neutral-immutable-900); /* Border */ --border-accent-blueharbor: var(--color-blueharbor-300); --border-accent-fuchsia: var(--color-fuchsia-300); --border-accent-lime: var(--color-lime-300); --border-accent-pink: var(--color-pink-300); --border-accent-teal: var(--color-teal-300); --border-accent-orange: var(--color-orange-300); --border-accent-violet: var(--color-violet-300); --border-success-softest: var(--color-green-300); --border-success-softer: var(--color-green-400); --border-success: var(--color-green-600); --border-success-pressed: var(--color-green-800); --border-warning-softest: var(--color-yellow-300); --border-warning-softer: var(--color-yellow-400); --border-warning: var(--color-yellow-600); --border-danger-softest: var(--color-red-300); --border-danger-softer: var(--color-red-400); --border-danger: var(--color-red-600); --border-danger-bold: var(--color-red-800); --border-danger-bold-pressed: var(--color-red-1000); --border-info-softest: var(--color-blue-200); --border-layout-editor: var(--color-pink-700); --border-focused: var(--color-brand-500); --border-primary-softest: var(--color-brand-400); --border-primary-softer: var(--color-brand-500); --border-primary: var(--color-brand-600); --border-primary-bold: var(--color-brand-700); --border-primary-selected: var(--color-brand-800); --border-soft-transparent: var(--color-neutral-300A); --border: var(--color-neutral-300A); --border-bold: var(--color-neutral-600); --border-bold-transparent: var(--color-neutral-500A); --border-disabled: var(--color-neutral-200A); --border-inverse: var(--color-neutral-0); --border-inverse-neutral: var(--color-neutral-400); --border-neutral: var(--color-neutral-500); --border-neutral-hovered: var(--color-neutral-600); --border-neutral-pressed: var(--color-neutral-700); --border-input: var(--color-neutral-300); --border-input-disabled: var(--color-neutral-400A); /* Background */ --bg-accent-blueharbor-softest: var(--color-blueharbor-100); --bg-accent-blueharbor-softer: var(--color-blueharbor-200); --bg-accent-blueharbor-bold: var(--color-blueharbor-700); --bg-accent-blueharbor-bold-hovered: var(--color-blueharbor-800); --bg-accent-blueharbor-bold-pressed: var(--color-blueharbor-900); --bg-accent-fuchsia-softest: var(--color-fuchsia-100); --bg-accent-fuchsia-softer: var(--color-fuchsia-200); --bg-accent-fuchsia-bold: var(--color-fuchsia-700); --bg-accent-fuchsia-bold-hovered: var(--color-fuchsia-800); --bg-accent-fuchsia-bold-pressed: var(--color-fuchsia-900); --bg-accent-lime-softest: var(--color-lime-100); --bg-accent-lime-softer: var(--color-lime-200); --bg-accent-lime-bold: var(--color-lime-700); --bg-accent-lime-bold-hovered: var(--color-lime-800); --bg-accent-lime-bold-pressed: var(--color-lime-900); --bg-accent-pink-softest: var(--color-pink-100); --bg-accent-pink-softer: var(--color-pink-200); --bg-accent-pink-bold: var(--color-pink-700); --bg-accent-pink-bold-hovered: var(--color-pink-800); --bg-accent-pink-bold-pressed: var(--color-pink-900); --bg-accent-teal-softest: var(--color-teal-100); --bg-accent-teal-softer: var(--color-teal-200); --bg-accent-teal-bold: var(--color-teal-700); --bg-accent-teal-bold-hovered: var(--color-teal-800); --bg-accent-teal-bold-pressed: var(--color-teal-900); --bg-accent-orange-softest: var(--color-orange-100); --bg-accent-orange-softer: var(--color-orange-200); --bg-accent-orange-bold: var(--color-orange-700); --bg-accent-orange-bold-hovered: var(--color-orange-800); --bg-accent-orange-bold-pressed: var(--color-orange-900); --bg-accent-violet-softest: var(--color-violet-100); --bg-accent-violet-softer: var(--color-violet-200); --bg-accent-violet-bold: var(--color-violet-700); --bg-accent-violet-bold-hovered: var(--color-violet-800); --bg-accent-violet-bold-pressed: var(--color-violet-900); --bg-success-softest: var(--color-green-100); --bg-success-softer: var(--color-green-200); --bg-success-bold: var(--color-green-700); --bg-success-bold-hovered: var(--color-green-800); --bg-success-bold-pressed: var(--color-green-900); --bg-warning-softest: var(--color-yellow-100); --bg-warning-softer: var(--color-yellow-200); --bg-warning-bold: var(--color-yellow-400); --bg-danger-softest: var(--color-red-100); --bg-danger-softer: var(--color-red-200); --bg-danger-bold: var(--color-red-700); --bg-danger-bold-hovered: var(--color-red-800); --bg-danger-bold-pressed: var(--color-red-900); --bg-info-softest: var(--color-blue-100); --bg-info-softer: var(--color-blue-200); --bg-info-soft: var(--color-blue-300); --bg-info-bold: var(--color-blue-600); --bg-primary-softest: var(--color-brand-100); --bg-primary-softer: var(--color-brand-200); --bg-primary-soft: var(--color-brand-300); --bg-primary-bold: var(--color-brand-600); --bg-primary-bold-hover: var(--color-brand-700); --bg-primary-bold-selected: var(--color-brand-800); --bg-accent-gray-softest: var(--color-neutral-100); --bg-accent-gray-softest-hovered: var(--color-neutral-200); --bg-accent-gray-softest-pressed: var(--color-neutral-300); --bg-accent-gray-softer: var(--color-neutral-200); --bg-accent-gray-softer-hovered: var(--color-neutral-300); --bg-accent-gray-softer-pressed: var(--color-neutral-400); --bg-accent-gray-soft: var(--color-neutral-400); --bg-accent-gray-soft-hovered: var(--color-neutral-500); --bg-accent-gray-soft-pressed: var(--color-neutral-600); --bg-accent-gray-bolder: var(--color-neutral-700); --bg-accent-gray-bolder-hovered: var(--color-neutral-800); --bg-accent-gray-bolder-pressed: var(--color-neutral-900); --bg-accent-gray-disabled: var(--color-neutral-100A); --bg-neutral-soft: var(--color-neutral-0); --bg-neutral-soft-layered: var(--color-neutral-0); --bg-neutral-soft-hovered: var(--color-neutral-200A); --bg-neutral-soft-pressed: var(--color-neutral-300A); --bg-neutral-transparent: var(--color-neutral-0A); --bg-neutral: var(--color-neutral-200A); --bg-neutral-hovered: var(--color-neutral-300A); --bg-neutral-pressed: var(--color-neutral-400A); --bg-neutral-bold: var(--color-neutral-900); --bg-neutral-bold-hovered: var(--color-neutral-1000); --bg-neutral-bold-pressed: var(--color-neutral-1100); --bg-neutral-inverse: var(--color-neutral-1100); --bg-neutral-dark-immutable: var(--color-neutral-immutable-900); --bg-neutral-darkest-immutable: var(--color-neutral-immutable-1000); --bg-input: var(--color-neutral-0); --bg-input-disabled: var(--color-neutral-100); /* Interaction */ --interaction-hover: var(--color-neutral-300A); --interaction-pressed: var(--color-neutral-500A); /* Skeleton */ --skeleton-lightest: var(--color-neutral-100A); --skeleton-lighter: var(--color-neutral-200A); --skeleton-light: var(--color-neutral-300A); /* Blanket */ --blanket: var(--color-neutral-500A); --blanket-selected: var(--color-neutral-300A); --blanket-danger: var(--color-red-300A); /* Chart */ --chart-1-softer: var(--color-brand-200); --chart-1: var(--color-brand-400); --chart-1-hovered: var(--color-brand-500); --chart-1-selected: var(--color-brand-600); --chart-2-softer: var(--color-orange-200); --chart-2: var(--color-orange-400); --chart-2-hovered: var(--color-orange-500); --chart-2-selected: var(--color-orange-600); --chart-3-softer: var(--color-violet-200); --chart-3: var(--color-violet-400); --chart-3-hovered: var(--color-violet-500); --chart-3-selected: var(--color-violet-600); --chart-4-softer: var(--color-teal-200); --chart-4: var(--color-teal-400); --chart-4-hovered: var(--color-teal-500); --chart-4-selected: var(--color-teal-600); --chart-5-softer: var(--color-pink-200); --chart-5: var(--color-pink-400); --chart-5-hovered: var(--color-pink-500); --chart-5-selected: var(--color-pink-600); --chart-6-softer: var(--color-lime-200); --chart-6: var(--color-lime-400); --chart-6-hovered: var(--color-lime-500); --chart-6-selected: var(--color-lime-600); --chart-7-softer: var(--color-fuchsia-200); --chart-7: var(--color-fuchsia-400); --chart-7-hovered: var(--color-fuchsia-500); --chart-7-selected: var(--color-fuchsia-600); --chart-8-softer: var(--color-blueharbor-200); --chart-8: var(--color-blueharbor-400); --chart-8-hovered: var(--color-blueharbor-500); --chart-8-selected: var(--color-blueharbor-600); --chart-neutral-softer: var(--color-neutral-200); --chart-neutral: var(--color-neutral-400); --chart-neutral-hovered: var(--color-neutral-500); --chart-neutral-selected: var(--color-neutral-600); --chart-danger-softer: var(--color-red-200); --chart-danger: var(--color-red-400); --chart-danger-hovered: var(--color-red-500); --chart-danger-selected: var(--color-red-600); --chart-warning-softer: var(--color-yellow-200); --chart-warning: var(--color-yellow-400); --chart-warning-hovered: var(--color-yellow-500); --chart-warning-selected: var(--color-yellow-600); --chart-success-softer: var(--color-green-200); --chart-success: var(--color-green-400); --chart-success-hovered: var(--color-green-500); --chart-success-selected: var(--color-green-600); --sidebar-width: 16rem; --sidebar-width-mobile: 18rem; --sidebar-width-icon: 3rem; } .dark { /* shadcn out-of-the-box variables – these will be gradually removed as we apply PDS component styles */ --background: var(--bg-neutral-soft); --foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --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); /* PDS tokens (ordering is based on Figma) */ /* Text */ --text-accent-blueharbor: var(--color-blueharbor-300); --text-accent-blueharbor-bolder: var(--color-blueharbor-200); --text-accent-fuchsia: var(--color-fuchsia-300); --text-accent-fuchsia-bolder: var(--color-fuchsia-200); --text-accent-lime: var(--color-lime-300); --text-accent-lime-bolder: var(--color-lime-200); --text-accent-pink: var(--color-pink-300); --text-accent-pink-bolder: var(--color-pink-200); --text-accent-teal: var(--color-teal-300); --text-accent-teal-bolder: var(--color-teal-200); --text-accent-orange: var(--color-orange-300); --text-accent-orange-bolder: var(--color-orange-200); --text-accent-violet: var(--color-violet-300); --text-accent-violet-bolder: var(--color-violet-200); --text-success: var(--color-green-400); --text-warning: var(--color-yellow-400); --text-warning-inverse: var(--var-neutral-dark-100); --text-danger: var(--color-red-400); --text-information: var(--color-blue-400); --text-primary: var(--color-brand-400); --text-selected: var(--color-brand-400); --text-softer: var(--color-neutral-dark-700); --text-soft: var(--color-neutral-dark-800); --text: var(--color-neutral-dark-900); --text-disabled: var(--color-neutral-dark-400A); --text-inverse: var(--color-neutral-dark-100); --text-light-immutable: var(--color-neutral-immutable-0); --text-dark-immutable: var(--color-neutral-immutable-900); /* Link */ --link: var(--color-brand-400); --link-pressed: var(--color-brand-300); --link-visited: var(--color-violet-300); --link-visited-pressed: var(--color-violet-200); /* Icon */ --icon-accent-blueharbor: var(--color-blueharbor-400); --icon-accent-fuchsia: var(--color-fuchsia-400); --icon-accent-lime: var(--color-lime-400); --icon-accent-pink: var(--color-pink-400); --icon-accent-teal: var(--color-teal-400); --icon-accent-orange: var(--color-orange-400); --icon-accent-violet: var(--color-violet-400); --icon-success: var(--color-green-600); --icon-warning: var(--color-yellow-400); --icon-warning-inverse: var(--color-neutral-dark-100); --icon-danger: var(--color-red-500); --icon-info: var(--color-blue-600); --icon-primary: var(--color-brand-600); --icon-primary-selected: var(--color-brand-500); --icon-soft: var(--color-neutral-dark-700); --icon: var(--color-neutral-dark-900); --icon-selected: var(--color-neutral-dark-1000); --icon-disabled: var(--color-neutral-dark-400A); --icon-inverse: var(--color-neutral-dark-100); --icon-light-immutable: var(--color-neutral-immutable-0); --icon-dark-immutable: var(--color-neutral-immutable-900); /* Border */ --border-accent-blueharbor: var(--color-blueharbor-800); --border-accent-fuchsia: var(--color-fuchsia-800); --border-accent-lime: var(--color-lime-800); --border-accent-pink: var(--color-pink-800); --border-accent-teal: var(--color-teal-800); --border-accent-orange: var(--color-orange-800); --border-accent-violet: var(--color-violet-800); --border-success-softest: var(--color-green-700); --border-success-softer: var(--color-green-600); --border-success: var(--color-green-500); --border-success-pressed: var(--color-green-300); --border-warning-softest: var(--color-yellow-700); --border-warning-softer: var(--color-yellow-600); --border-warning: var(--color-yellow-400); --border-danger-softest: var(--color-red-800); --border-danger-softer: var(--color-red-600); --border-danger: var(--color-red-500); --border-danger-bold: var(--color-red-600); --border-danger-bold-pressed: var(--color-red-200); --border-info-softest: var(--color-blue-900); --border-layout-editor: var(--color-pink-600); --border-focused: var(--color-brand-300); --border-primary-softest: var(--color-brand-600); --border-primary-softer: var(--color-brand-400); --border-primary: var(--color-brand-200); --border-primary-bold: var(--color-brand-300); --border-primary-selected: var(--color-brand-400); --border-soft-transparent: var(--color-neutral-dark-300A); --border: var(--color-neutral-dark-300A); --border-bold: var(--color-neutral-dark-600); --border-bold-transparent: var(--color-neutral-dark-500A); --border-disabled: var(--color-neutral-dark-200A); --border-inverse: var(--color-neutral-dark-0); --border-inverse-neutral: var(--color-neutral-dark-400); --border-neutral: var(--color-neutral-dark-500); --border-neutral-hovered: var(--color-neutral-dark-600); --border-neutral-pressed: var(--color-neutral-dark-700); --border-input: var(--color-neutral-dark-300); --border-input-disabled: var(--color-neutral-dark-400A); /* Background */ --bg-accent-blueharbor-softest: var(--color-blueharbor-1000); --bg-accent-blueharbor-softer: var(--color-blueharbor-900); --bg-accent-blueharbor-bold: var(--color-blueharbor-500); --bg-accent-blueharbor-bold-hovered: var(--color-blueharbor-400); --bg-accent-blueharbor-bold-pressed: var(--color-blueharbor-300); --bg-accent-fuchsia-softest: var(--color-fuchsia-1000); --bg-accent-fuchsia-softer: var(--color-fuchsia-900); --bg-accent-fuchsia-bold: var(--color-fuchsia-500); --bg-accent-fuchsia-bold-hovered: var(--color-fuchsia-400); --bg-accent-fuchsia-bold-pressed: var(--color-fuchsia-300); --bg-accent-lime-softest: var(--color-lime-1000); --bg-accent-lime-softer: var(--color-lime-900); --bg-accent-lime-bold: var(--color-lime-500); --bg-accent-lime-bold-hovered: var(--color-lime-400); --bg-accent-lime-bold-pressed: var(--color-lime-300); --bg-accent-pink-softest: var(--color-pink-1000); --bg-accent-pink-softer: var(--color-pink-900); --bg-accent-pink-bold: var(--color-pink-500); --bg-accent-pink-bold-hovered: var(--color-pink-400); --bg-accent-pink-bold-pressed: var(--color-pink-300); --bg-accent-teal-softest: var(--color-teal-1000); --bg-accent-teal-softer: var(--color-teal-900); --bg-accent-teal-bold: var(--color-teal-500); --bg-accent-teal-bold-hovered: var(--color-teal-400); --bg-accent-teal-bold-pressed: var(--color-teal-300); --bg-accent-orange-softest: var(--color-orange-1000); --bg-accent-orange-softer: var(--color-orange-900); --bg-accent-orange-bold: var(--color-orange-500); --bg-accent-orange-bold-hovered: var(--color-orange-400); --bg-accent-orange-bold-pressed: var(--color-orange-300); --bg-accent-violet-softest: var(--color-violet-1000); --bg-accent-violet-softer: var(--color-violet-900); --bg-accent-violet-bold: var(--color-violet-500); --bg-accent-violet-bold-hovered: var(--color-violet-400); --bg-accent-violet-bold-pressed: var(--color-violet-300); --bg-success-softest: var(--color-green-1000); --bg-success-softer: var(--color-green-900); --bg-success-bold: var(--color-green-400); --bg-success-bold-hovered: var(--color-green-300); --bg-success-bold-pressed: var(--color-green-200); --bg-warning-softest: var(--color-yellow-1000); --bg-warning-softer: var(--color-yellow-900); --bg-warning-bold: var(--color-yellow-400); --bg-danger-softest: var(--color-red-1000); --bg-danger-softer: var(--color-red-900); --bg-danger-bold: var(--color-red-400); --bg-danger-bold-hovered: var(--color-red-300); --bg-danger-bold-pressed: var(--color-red-200); --bg-info-softest: var(--color-blue-1000); --bg-info-softer: var(--color-blue-900); --bg-info-soft: var(--color-blue-800); --bg-info-bold: var(--color-blue-600); --bg-primary-softest: var(--color-neutral-dark-350); --bg-primary-softer: var(--color-brand-900); --bg-primary-soft: var(--color-brand-800); --bg-primary-bold: var(--color-brand-600); --bg-primary-bold-hover: var(--color-brand-500); --bg-primary-bold-selected: var(--color-brand-400); --bg-accent-gray-softest: var(--color-neutral-dark-100); --bg-accent-gray-softest-hovered: var(--color-neutral-dark-250); --bg-accent-gray-softest-pressed: var(--color-neutral-dark-300); --bg-accent-gray-softer: var(--color-neutral-dark-200); --bg-accent-gray-softer-hovered: var(--color-neutral-dark-350); --bg-accent-gray-softer-pressed: var(--color-neutral-dark-400); --bg-accent-gray-soft: var(--color-neutral-dark-400); --bg-accent-gray-soft-hovered: var(--color-neutral-dark-500); --bg-accent-gray-soft-pressed: var(--color-neutral-dark-600); --bg-accent-gray-bolder: var(--color-neutral-dark-700); --bg-accent-gray-bolder-hovered: var(--color-neutral-dark-800); --bg-accent-gray-bolder-pressed: var(--color-neutral-dark-900); --bg-accent-gray-disabled: var(--color-neutral-dark-100A); --bg-neutral-soft: var(--color-neutral-dark-0); --bg-neutral-soft-layered: var(--color-neutral-dark-100); --bg-neutral-soft-hovered: var(--color-neutral-dark-200A); --bg-neutral-soft-pressed: var(--color-neutral-dark-300A); --bg-neutral-transparent: var(--color-neutral-dark-0A); --bg-neutral: var(--color-neutral-dark-200A); --bg-neutral-hovered: var(--color-neutral-dark-300A); --bg-neutral-pressed: var(--color-neutral-dark-400A); --bg-neutral-bold: var(--color-neutral-dark-900); --bg-neutral-bold-hovered: var(--color-neutral-dark-1000); --bg-neutral-bold-pressed: var(--color-neutral-dark-1100); --bg-neutral-inverse: var(--color-neutral-dark-1100); --bg-neutral-dark-immutable: var(--color-neutral-immutable-700); --bg-neutral-darkest-immutable: var(--color-neutral-immutable-1000); --bg-input: var(--color-neutral-dark-200); --bg-input-disabled: var(--color-neutral-dark-100); /* Interaction */ --interaction-hover: var(--color-neutral-dark-300A); --interaction-pressed: var(--color-neutral-dark-500A); /* Skeleton */ --skeleton-lightest: var(--color-neutral-dark-100A); --skeleton-lighter: var(--color-neutral-dark-200A); --skeleton-light: var(--color-neutral-dark-300A); /* Blanket */ --blanket: var(--color-neutral-dark--200A); --blanket-selected: var(--color-neutral-dark-300A); --blanket-danger: var(--color-red-900A); /* Chart */ --chart-1-softer: var(--color-brand-900); --chart-1: var(--color-brand-700); --chart-1-hovered: var(--color-brand-600); --chart-1-selected: var(--color-brand-500); --chart-2-softer: var(--color-orange-900); --chart-2: var(--color-orange-700); --chart-2-hovered: var(--color-orange-600); --chart-2-selected: var(--color-orange-500); --chart-3-softer: var(--color-violet-900); --chart-3: var(--color-violet-700); --chart-3-hovered: var(--color-violet-600); --chart-3-selected: var(--color-violet-500); --chart-4-softer: var(--color-teal-900); --chart-4: var(--color-teal-700); --chart-4-hovered: var(--color-teal-600); --chart-4-selected: var(--color-teal-500); --chart-5-softer: var(--color-pink-900); --chart-5: var(--color-pink-700); --chart-5-hovered: var(--color-pink-600); --chart-5-selected: var(--color-pink-400); --chart-6-softer: var(--color-lime-900); --chart-6: var(--color-lime-700); --chart-6-hovered: var(--color-lime-600); --chart-6-selected: var(--color-lime-500); --chart-7-softer: var(--color-fuchsia-900); --chart-7: var(--color-fuchsia-700); --chart-7-hovered: var(--color-fuchsia-600); --chart-7-selected: var(--color-fuchsia-500); --chart-8-softer: var(--color-blueharbor-900); --chart-8: var(--color-blueharbor-700); --chart-8-hovered: var(--color-blueharbor-600); --chart-8-selected: var(--color-blueharbor-500); --chart-neutral-softer: var(--color-neutral-dark-200); --chart-neutral: var(--color-neutral-dark-400); --chart-neutral-hovered: var(--color-neutral-dark-500); --chart-neutral-selected: var(--color-neutral-dark-600); --chart-danger-softer: var(--color-red-900); --chart-danger: var(--color-red-700); --chart-danger-hovered: var(--color-red-600); --chart-danger-selected: var(--color-red-500); --chart-warning-softer: var(--color-yellow-900); --chart-warning: var(--color-yellow-700); --chart-warning-hovered: var(--color-yellow-600); --chart-warning-selected: var(--color-yellow-500); --chart-success-softer: var(--color-green-900); --chart-success: var(--color-green-700); --chart-success-hovered: var(--color-green-600); --chart-success-selected: var(--color-green-500); } /* Utility colors which will be resolved to the active theme at run-time */ @theme inline { --color-background: var(--background); --color-foreground: var(--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); /* Conga variables */ --font-sans: "Open Sans", sans-serif; --color-ring: var(--border-focused); /* PDS tokens (ordering is based on Figma) */ /* Text */ --color-text-accent-blueharbor: var(--text-accent-blueharbor); --color-text-accent-blueharbor-bolder: var(--text-accent-blueharbor-bolder); --color-text-accent-fuchsia: var(--text-accent-fuchsia); --color-text-accent-fuchsia-bolder: var(--text-accent-fuchsia-bolder); --color-text-accent-lime: var(--text-accent-lime); --color-text-accent-lime-bolder: var(--text-accent-lime-bolder); --color-text-accent-pink: var(--text-accent-pink); --color-text-accent-pink-bolder: var(--text-accent-pink-bolder); --color-text-accent-teal: var(--text-accent-teal); --color-text-accent-teal-bolder: var(--text-accent-teal-bolder); --color-text-accent-orange: var(--text-accent-orange); --color-text-accent-orange-bolder: var(--text-accent-orange-bolder); --color-text-accent-violet: var(--text-accent-violet); --color-text-accent-violet-bolder: var(--text-accent-violet-bolder); --color-text-success: var(--text-success); --color-text-warning: var(--text-warning); --color-text-warning-inverse: var(--text-warning-inverse); --color-text-danger: var(--text-danger); --color-text-information: var(--text-information); --color-text-primary: var(--text-primary); --color-text-selected: var(--text-selected); --color-text-softer: var(--text-softer); --color-text-soft: var(--text-soft); --color-text: var(--text); --color-text-disabled: var(--text-disabled); --color-text-inverse: var(--text-inverse); --color-text-light-immutable: var(--text-light-immutable); --color-text-dark-immutable: var(--text-dark-immutable); /* Link */ --color-link: var(--link); --color-link-pressed: var(--link-pressed); --color-link-visited: var(--link-visited); --color-link-visited-pressed: var(--link-visited-pressed); /* Icon */ --color-icon-accent-blueharbor: var(--icon-accent-blueharbor); --color-icon-accent-fuchsia: var(--icon-accent-fuchsia); --color-icon-accent-lime: var(--icon-accent-lime); --color-icon-accent-pink: var(--icon-accent-pink); --color-icon-accent-teal: var(--icon-accent-teal); --color-icon-accent-orange: var(--icon-accent-orange); --color-icon-accent-violet: var(--icon-accent-violet); --color-icon-success: var(--icon-success); --color-icon-warning: var(--icon-warning); --color-icon-warning-inverse: var(--icon-warning-inverse); --color-icon-danger: var(--icon-danger); --color-icon-info: var(--icon-info); --color-icon-primary: var(--icon-primary); --color-icon-primary-selected: var(--icon-primary-selected); --color-icon-soft: var(--icon-soft); --color-icon: var(--icon); --color-icon-selected: var(--icon-selected); --color-icon-disabled: var(--icon-disabled); --color-icon-inverse: var(--icon-inverse); --color-icon-light-immutable: var(--icon-light-immutable); --color-icon-dark-immutable: var(--icon-dark-immutable); /* Border */ --color-border-accent-blueharbor: var(--border-accent-blueharbor); --color-border-accent-fuchsia: var(--border-accent-fuchsia); --color-border-accent-lime: var(--border-accent-lime); --color-border-accent-pink: var(--border-accent-pink); --color-border-accent-teal: var(--border-accent-teal); --color-border-accent-orange: var(--border-accent-orange); --color-border-accent-violet: var(--border-accent-violet); --color-border-success-softest: var(--border-success-softest); --color-border-success-softer: var(--border-success-softer); --color-border-success: var(--border-success); --color-border-success-pressed: var(--border-success-pressed); --color-border-warning-softest: var(--border-warning-softest); --color-border-warning-softer: var(--border-warning-softer); --color-border-warning: var(--border-warning); --color-border-danger-softest: var(--border-danger-softest); --color-border-danger-softer: var(--border-danger-softer); --color-border-danger: var(--border-danger); --color-border-danger-bold: var(--border-danger-bold); --color-border-danger-bold-pressed: var(--border-danger-bold-pressed); --color-border-info-softest: var(--border-info-softest); --color-border-layout-editor: var(--border-layout-editor); --color-border-focused: var(--border-focused); --color-border-primary-softest: var(--border-primary-softest); --color-border-primary-softer: var(--border-primary-softer); --color-border-primary: var(--border-primary); --color-border-primary-bold: var(--border-primary-bold); --color-border-primary-selected: var(--border-primary-selected); --color-border-soft-transparent: var(--border-soft-transparent); --color-border: var(--border); --color-border-bold: var(--border-bold); --color-border-bold-transparent: var(--border-bold-transparent); --color-border-disabled: var(--border-disabled); --color-border-inverse: var(--border-inverse); --color-border-inverse-neutral: var(--border-inverse-neutral); --color-border-neutral: var(--border-neutral); --color-border-neutral-hovered: var(--border-neutral-hovered); --color-border-neutral-pressed: var(--border-neutral-pressed); --color-border-input: var(--border-input); --color-border-input-disabled: var(--border-input-disabled); /* Background */ --color-bg-accent-blueharbor-softest: var(--bg-accent-blueharbor-softest); --color-bg-accent-blueharbor-softer: var(--bg-accent-blueharbor-softer); --color-bg-accent-blueharbor-bold: var(--bg-accent-blueharbor-bold); --color-bg-accent-blueharbor-bold-hovered: var(--bg-accent-blueharbor-bold-hovered); --color-bg-accent-blueharbor-bold-pressed: var(--bg-accent-blueharbor-bold-pressed); --color-bg-accent-fuchsia-softest: var(--bg-accent-fuchsia-softest); --color-bg-accent-fuchsia-softer: var(--bg-accent-fuchsia-softer); --color-bg-accent-fuchsia-bold: var(--bg-accent-fuchsia-bold); --color-bg-accent-fuchsia-bold-hovered: var(--bg-accent-fuchsia-bold-hovered); --color-bg-accent-fuchsia-bold-pressed: var(--bg-accent-fuchsia-bold-pressed); --color-bg-accent-lime-softest: var(--bg-accent-lime-softest); --color-bg-accent-lime-softer: var(--bg-accent-lime-softer); --color-bg-accent-lime-bold: var(--bg-accent-lime-bold); --color-bg-accent-lime-bold-hovered: var(--bg-accent-lime-bold-hovered); --color-bg-accent-lime-bold-pressed: var(--bg-accent-lime-bold-pressed); --color-bg-accent-pink-softest: var(--bg-accent-pink-softest); --color-bg-accent-pink-softer: var(--bg-accent-pink-softer); --color-bg-accent-pink-bold: var(--bg-accent-pink-bold); --color-bg-accent-pink-bold-hovered: var(--bg-accent-pink-bold-hovered); --color-bg-accent-pink-bold-pressed: var(--bg-accent-pink-bold-pressed); --color-bg-accent-teal-softest: var(--bg-accent-teal-softest); --color-bg-accent-teal-softer: var(--bg-accent-teal-softer); --color-bg-accent-teal-bold: var(--bg-accent-teal-bold); --color-bg-accent-teal-bold-hovered: var(--bg-accent-teal-bold-hovered); --color-bg-accent-teal-bold-pressed: var(--bg-accent-teal-bold-pressed); --color-bg-accent-orange-softest: var(--bg-accent-orange-softest); --color-bg-accent-orange-softer: var(--bg-accent-orange-softer); --color-bg-accent-orange-bold: var(--bg-accent-orange-bold); --color-bg-accent-orange-bold-hovered: var(--bg-accent-orange-bold-hovered); --color-bg-accent-orange-bold-pressed: var(--bg-accent-orange-bold-pressed); --color-bg-accent-violet-softest: var(--bg-accent-violet-softest); --color-bg-accent-violet-softer: var(--bg-accent-violet-softer); --color-bg-accent-violet-bold: var(--bg-accent-violet-bold); --color-bg-accent-violet-bold-hovered: var(--bg-accent-violet-bold-hovered); --color-bg-accent-violet-bold-pressed: var(--bg-accent-violet-bold-pressed); --color-bg-success-softest: var(--bg-success-softest); --color-bg-success-softer: var(--bg-success-softer); --color-bg-success-bold: var(--bg-success-bold); --color-bg-success-bold-hovered: var(--bg-success-bold-hovered); --color-bg-success-bold-pressed: var(--bg-success-bold-pressed); --color-bg-warning-softest: var(--bg-warning-softest); --color-bg-warning-softer: var(--bg-warning-softer); --color-bg-warning-bold: var(--bg-warning-bold); --color-bg-danger-softest: var(--bg-danger-softest); --color-bg-danger-softer: var(--bg-danger-softer); --color-bg-danger-bold: var(--bg-danger-bold); --color-bg-danger-bold-hovered: var(--bg-danger-bold-hovered); --color-bg-danger-bold-pressed: var(--bg-danger-bold-pressed); --color-bg-info-softest: var(--bg-info-softest); --color-bg-info-softer: var(--bg-info-softer); --color-bg-info-soft: var(--bg-info-soft); --color-bg-info-bold: var(--bg-info-bold); --color-bg-primary-softest: var(--bg-primary-softest); --color-bg-primary-softer: var(--bg-primary-softer); --color-bg-primary-soft: var(--bg-primary-soft); --color-bg-primary-bold: var(--bg-primary-bold); --color-bg-primary-bold-hover: var(--bg-primary-bold-hover); --color-bg-primary-bold-selected: var(--bg-primary-bold-selected); --color-bg-accent-gray-softest: var(--bg-accent-gray-softest); --color-bg-accent-gray-softest-hovered: var(--bg-accent-gray-softest-hovered); --color-bg-accent-gray-softest-pressed: var(--bg-accent-gray-softest-pressed); --color-bg-accent-gray-softer: var(--bg-accent-gray-softer); --color-bg-accent-gray-softer-hovered: var(--bg-accent-gray-softer-hovered); --color-bg-accent-gray-softer-pressed: var(--bg-accent-gray-softer-pressed); --color-bg-accent-gray-soft: var(--bg-accent-gray-soft); --color-bg-accent-gray-soft-hovered: var(--bg-accent-gray-soft-hovered); --color-bg-accent-gray-soft-pressed: var(--bg-accent-gray-soft-pressed); --color-bg-accent-gray-bolder: var(--bg-accent-gray-bolder); --color-bg-accent-gray-bolder-hovered: var(--bg-accent-gray-bolder-hovered); --color-bg-accent-gray-bolder-pressed: var(--bg-accent-gray-bolder-pressed); --color-bg-accent-gray-disabled: var(--bg-accent-gray-disabled); --color-bg-neutral-soft: var(--bg-neutral-soft); --color-bg-neutral-soft-layered: var(--bg-neutral-soft-layered); --color-bg-neutral-soft-hovered: var(--bg-neutral-soft-hovered); --color-bg-neutral-soft-pressed: var(--bg-neutral-soft-pressed); --color-bg-neutral-transparent: var(--bg-neutral-transparent); --color-bg-neutral: var(--bg-neutral); --color-bg-neutral-hovered: var(--bg-neutral-hovered); --color-bg-neutral-pressed: var(--bg-neutral-pressed); --color-bg-neutral-bold: var(--bg-neutral-bold); --color-bg-neutral-bold-hovered: var(--bg-neutral-bold-hovered); --color-bg-neutral-bold-pressed: var(--bg-neutral-bold-pressed); --color-bg-neutral-inverse: var(--bg-neutral-inverse); --color-bg-neutral-dark-immutable: var(--bg-neutral-dark-immutable); --color-bg-neutral-darkest-immutable: var(--bg-neutral-darkest-immutable); --color-bg-input: var(--bg-input); --color-bg-input-disabled: var(--bg-input-disabled); /* Interaction */ --color-interaction-hover: var(--interaction-hover); --color-interaction-pressed: var(--interaction-pressed); /* Skeleton */ --color-skeleton-lightest: var(--skeleton-lightest); --color-skeleton-lighter: var(--skeleton-lighter); --color-skeleton-light: var(--skeleton-light); /* Blanket */ --color-blanket: var(--blanket); --color-blanket-selected: var(--blanket-selected); --color-blanket-danger: var(--blanket-danger); /* Chart */ --color-chart-1-softer: var(--chart-1-softer); --color-chart-1: var(--chart-1); --color-chart-1-hovered: var(--chart-1-hovered); --color-chart-1-selected: var(--chart-1-selected); --color-chart-2-softer: var(--chart-2-softer); --color-chart-2: var(--chart-2); --color-chart-2-hovered: var(--chart-2-hovered); --color-chart-2-selected: var(--chart-2-selected); --color-chart-3-softer: var(--chart-3-softer); --color-chart-3: var(--chart-3); --color-chart-3-hovered: var(--chart-3-hovered); --color-chart-3-selected: var(--chart-3-selected); --color-chart-4-softer: var(--chart-4-softer); --color-chart-4: var(--chart-4); --color-chart-4-hovered: var(--chart-4-hovered); --color-chart-4-selected: var(--chart-4-selected); --color-chart-5-softer: var(--chart-5-softer); --color-chart-5: var(--chart-5); --color-chart-5-hovered: var(--chart-5-hovered); --color-chart-5-selected: var(--chart-5-selected); --color-chart-6-softer: var(--chart-6-softer); --color-chart-6: var(--chart-6); --color-chart-6-hovered: var(--chart-6-hovered); --color-chart-6-selected: var(--chart-6-selected); --color-chart-7-softer: var(--chart-7-softer); --color-chart-7: var(--chart-7); --color-chart-7-hovered: var(--chart-7-hovered); --color-chart-7-selected: var(--chart-7-selected); --color-chart-8-softer: var(--chart-8-softer); --color-chart-8: var(--chart-8); --color-chart-8-hovered: var(--chart-8-hovered); --color-chart-8-selected: var(--chart-8-selected); --color-chart-neutral-softer: var(--chart-neutral-softer); --color-chart-neutral: var(--chart-neutral); --color-chart-neutral-hovered: var(--chart-neutral-hovered); --color-chart-neutral-selected: var(--chart-neutral-selected); --color-chart-danger-softer: var(--chart-danger-softer); --color-chart-danger: var(--chart-danger); --color-chart-danger-hovered: var(--chart-danger-hovered); --color-chart-danger-selected: var(--chart-danger-selected); --color-chart-warning-softer: var(--chart-warning-softer); --color-chart-warning: var(--chart-warning); --color-chart-warning-hovered: var(--chart-warning-hovered); --color-chart-warning-selected: var(--chart-warning-selected); --color-chart-success-softer: var(--chart-success-softer); --color-chart-success: var(--chart-success); --color-chart-success-hovered: var(--chart-success-hovered); --color-chart-success-selected: var(--chart-success-selected); } /* Component styles - will be scoped during package build */ @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-bg-neutral-soft text-text text-sm; } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } } @layer utilities { @keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } } .animate-accordion-down { animation: accordion-down 0.2s ease-out; } .animate-accordion-up { animation: accordion-up 0.2s ease-out; } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 2s linear infinite; } } /* Ensure dropdowns always appear on top */ .radix-dropdown-content { z-index: 50 !important; } [V0_FILE]typescriptreact:file="src/components/task-widget.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import type { Task } from "../interfaces/Task" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import TaskCard from "./task-card" import { ArrowRight, Plus, CheckSquare } from "lucide-react" import Link from "next/link" import { ROUTES } from "../constants/routes" interface TaskWidgetProps { className?: string } export default function TaskWidget({ className }: TaskWidgetProps) { const [tasks, setTasks] = useState([]) const [loading, setLoading] = useState(true) // Mock data for demonstration useEffect(() => { const mockTasks: Task[] = [ { id: "1", title: "Review Q4 Contract Terms", priority: "High", taskType: "Verifiable", status: "In Progress", submissionTrigger: "Manual", assigneeType: "User", assignee: "John Smith", assigneeId: "user-1", dueDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000), // 2 days from now recordName: "Enterprise Contract #2024-001", createdBy: "admin", createdOn: new Date(), modifiedBy: "admin", modifiedOn: new Date(), }, { id: "2", title: "Update pricing model documentation", priority: "Normal", taskType: "Actionable", status: "Not Started", submissionTrigger: "Manual", assigneeType: "User", assignee: "Sarah Johnson", assigneeId: "user-2", dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000), // 5 days from now taskGroup: "Documentation", createdBy: "admin", createdOn: new Date(), modifiedBy: "admin", modifiedOn: new Date(), }, { id: "3", title: "Quarterly compliance check", priority: "High", taskType: "Informational", status: "Not Started", submissionTrigger: "Activation", assigneeType: "User Group", assignee: "Compliance Team", assigneeId: "group-1", notifyOn: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000), // 1 day from now createdBy: "admin", createdOn: new Date(), modifiedBy: "admin", modifiedOn: new Date(), }, { id: "4", title: "Client onboarding checklist", priority: "Normal", taskType: "Actionable", status: "In Review", submissionTrigger: "Manual", assigneeType: "User", assignee: "Mike Davis", assigneeId: "user-3", dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days from now recordName: "Client: Acme Corp", taskGroup: "Onboarding", createdBy: "admin", createdOn: new Date(), modifiedBy: "admin", modifiedOn: new Date(), }, ] // Simulate API call setTimeout(() => { // Sort by due date (earliest first) and take first 4 const sortedTasks = mockTasks .filter((task) => task.status !== "Completed" && task.status !== "Cancelled") .sort((a, b) => { const dateA = a.dueDate || a.notifyOn || new Date() const dateB = b.dueDate || b.notifyOn || new Date() return new Date(dateA).getTime() - new Date(dateB).getTime() }) .slice(0, 4) setTasks(sortedTasks) setLoading(false) }, 1000) }, []) if (loading) { return ( My Active Tasks

{[...Array(4)].map((_, i) => (

))}

) } return (

My Active Tasks

{tasks.length === 0 ? (

No active tasks

You're all caught up! Create a new task to get started.

) : (

{tasks.map((task) => ( ))}

)} ) } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; /* Import Conga design system tokens */ @import "./globals-conga.css"; :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --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.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --bg-accent-gray-softer: #f0f0f0; /* Example value */ --bg-accent-gray-softest: #e0e0e0; /* Example value */ --bg-accent-gray-soft: #d0d0d0; /* Example value */ } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --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.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); --bg-accent-gray-softer: #303030; /* Example value */ --bg-accent-gray-softest: #202020; /* Example value */ --bg-accent-gray-soft: #404040; /* Example value */ } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --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); /* Added Conga design system background tokens */ --color-accent-gray-softer: var(--bg-accent-gray-softer); --color-accent-gray-softest: var(--bg-accent-gray-softest); --color-accent-gray-soft: var(--bg-accent-gray-soft); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="src/constants/task-constants.ts" import type { TaskType, TaskStatus, TaskPriority, SubmissionTrigger, AssigneeType } from "../interfaces/Task" export const TASK_TYPES: { value: TaskType; label: string }[] = [ { value: "Informational", label: "Informational" }, { value: "Actionable", label: "Actionable" }, { value: "Verifiable", label: "Verifiable" }, ] export const TASK_STATUSES: { value: TaskStatus; label: string }[] = [ { value: "In Draft", label: "In Draft" }, { value: "Not Started", label: "Not Started" }, { value: "In Progress", label: "In Progress" }, { value: "In Review", label: "In Review" }, { value: "Completed", label: "Completed" }, { value: "Cancelled", label: "Cancelled" }, ] export const TASK_PRIORITIES: { value: TaskPriority; label: string }[] = [ { value: "High", label: "High" }, { value: "Normal", label: "Normal" }, { value: "Low", label: "Low" }, ] export const SUBMISSION_TRIGGERS: { value: SubmissionTrigger; label: string }[] = [ { value: "Manual", label: "Manual" }, { value: "Activation", label: "Activation" }, ] export const ASSIGNEE_TYPES: { value: AssigneeType; label: string }[] = [ { value: "User", label: "User" }, { value: "User Group", label: "User Group" }, ] export const TASK_SOURCES: { value: "Platform" | "App Integration" | "External Integration" | "Manual" label: string description: string }[] = [ { value: "Platform", label: "Platform", description: "Tasks created directly on the platform" }, { value: "App Integration", label: "App Integration", description: "Tasks created by integrated applications" }, { value: "External Integration", label: "External Integration", description: "Tasks created via external integrations", }, { value: "Manual", label: "Manual", description: "Manually created tasks" }, ] // Status availability by task type export const STATUS_AVAILABILITY: Record = { Informational: ["In Draft", "Not Started", "Completed", "Cancelled"], Actionable: ["In Draft", "Not Started", "In Progress", "Completed", "Cancelled"], Verifiable: ["In Draft", "Not Started", "In Progress", "In Review", "Completed", "Cancelled"], } // Field availability by task type export const FIELD_AVAILABILITY: Record = { Informational: ["notifyOn"], Actionable: ["dueDate", "estimatedStartDate"], Verifiable: ["dueDate", "estimatedStartDate"], } // Character limits export const CHARACTER_LIMITS = { TITLE: 500, NOTES: 5000, COMMENT: 1000, TASK_GROUP: 50, } as const // Default values export const DEFAULT_VALUES = { PRIORITY: "Normal" as TaskPriority, SUBMISSION_TRIGGER: "Manual" as SubmissionTrigger, ASSIGNEE_TYPE: "User" as AssigneeType, DAYS_AHEAD: 7, DEFAULT_TIME: "10:00", } as const [V0_FILE]typescriptreact:file="src/components/task-filters.tsx" "use client" import { useState } from "react" import type { TaskFiltersProps } from "../interfaces/Task" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Search, Filter, X, SortAsc, SortDesc, Layers } from "lucide-react" import { TASK_TYPES, TASK_STATUSES, TASK_PRIORITIES, TASK_SOURCES } from "../constants/task-constants" export default function TaskFilters({ filters, sortOptions, onFiltersChange, onSortChange, onClearFilters, className, }: TaskFiltersProps) { const [showAdvanced, setShowAdvanced] = useState(false) const handleSearchChange = (search: string) => { onFiltersChange({ ...filters, search: search || undefined }) } const handleTaskTypeChange = (taskType: string, checked: boolean) => { const currentTypes = filters.taskType || [] const newTypes = checked ? [...currentTypes, taskType as any] : currentTypes.filter((t) => t !== taskType) onFiltersChange({ ...filters, taskType: newTypes.length > 0 ? newTypes : undefined, }) } const handleStatusChange = (status: string, checked: boolean) => { const currentStatuses = filters.status || [] const newStatuses = checked ? [...currentStatuses, status as any] : currentStatuses.filter((s) => s !== status) onFiltersChange({ ...filters, status: newStatuses.length > 0 ? newStatuses : undefined, }) } const handlePriorityChange = (priority: string, checked: boolean) => { const currentPriorities = filters.priority || [] const newPriorities = checked ? [...currentPriorities, priority as any] : currentPriorities.filter((p) => p !== priority) onFiltersChange({ ...filters, priority: newPriorities.length > 0 ? newPriorities : undefined, }) } const handleSourceChange = (source: string, checked: boolean) => { const currentSources = filters.source || [] const newSources = checked ? [...currentSources, source as any] : currentSources.filter((s) => s !== source) onFiltersChange({ ...filters, source: newSources.length > 0 ? newSources : undefined, }) } const getActiveFilterCount = () => { let count = 0 if (filters.search) count++ if (filters.taskType?.length) count++ if (filters.status?.length) count++ if (filters.priority?.length) count++ if (filters.source?.length) count++ if (filters.overdue) count++ return count } const activeFilterCount = getActiveFilterCount() return (

Filters & Search {activeFilterCount > 0 && ( {activeFilterCount} )}

{activeFilterCount > 0 && ( )}

{/* Search */}

Search Tasks

handleSearchChange(e.target.value)} className="pl-10" />

{/* Sort Options */}

Sort By

{/* Advanced Filters */} {showAdvanced && (

Task Source

{TASK_SOURCES.map((source) => (

handleSourceChange(source.value, checked as boolean)} /> {source.label}

))}

{/* Task Type Filter */}

Task Type

{TASK_TYPES.map((type) => (

handleTaskTypeChange(type.value, checked as boolean)} /> {type.label}

))}

{/* Status Filter */}

Status

{TASK_STATUSES.map((status) => (

handleStatusChange(status.value, checked as boolean)} /> {status.label}

))}

{/* Priority Filter */}

Priority

{TASK_PRIORITIES.map((priority) => (

handlePriorityChange(priority.value, checked as boolean)} /> {priority.label}

))}

{/* Overdue Filter */}

onFiltersChange({ ...filters, overdue: checked as boolean })} /> Show only overdue tasks

)} ) } [V0_FILE]typescriptreact:file="app/tasks/page.tsx" import TaskList from "../../src/components/task-list" export default function TasksPage() { return (

) } [V0_FILE]typescriptreact:file="src/components/app-sidebar.tsx" isQuickEdit="true" "use client" import type * as React from "react" import { Bell, CheckCircle, Home, Search, BarChart3, Quote, ShoppingCart, Package, Users, Gift, FileSearch, FileCheck, Bot, MessageSquare, Scale, CreditCard, Receipt, PenTool, LinkIcon, FolderOpen, ChevronDown, Sparkles, PanelLeftClose, PanelLeftOpen, CheckSquare, } from "lucide-react" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, useSidebar, } from "@/components/ui/sidebar" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import Link from "next/link" import { usePathname } from "next/navigation" // Navigation data structure matching the provided image const data = { user: { name: "nico@conga.com", email: "nico@conga.com", avatar: "/avatars/shadcn.jpg", role: "Systems Administrator", }, navMain: [ { title: "Home", url: "/", icon: Home, }, { title: "Search", url: "#", icon: Search, shortcut: "⌘+S", }, { title: "Notifications", url: "#", icon: Bell, badge: "23", }, { title: "Tasks", url: "/tasks", icon: CheckSquare, }, { title: "Conga Copilot", url: "#", icon: Sparkles, shortcut: "⌘+I", }, { title: "Approval Center", url: "#", icon: CheckCircle, }, { title: "Reports & Dashboards", url: "#", icon: BarChart3, }, ], quotesOrders: [ { title: "Quotes", url: "#", icon: Quote, }, { title: "Orders", url: "#", icon: ShoppingCart, }, { title: "Assets", url: "#", icon: Package, }, { title: "Collaboration Requests", url: "#", icon: Users, }, { title: "Incentive Programs", url: "#", icon: Gift, }, ], contracts: [ { title: "Advanced Search", url: "#", icon: FileSearch, }, { title: "Contracts", url: "#", icon: FileCheck, }, { title: "Discovery AI", url: "#", icon: Bot, }, { title: "Requests", url: "#", icon: MessageSquare, }, { title: "Obligations", url: "#", icon: Scale, }, ], billing: [ { title: "Billing", url: "#", icon: CreditCard, }, { title: "Invoice", url: "#", icon: Receipt, }, ], documents: [ { title: "Sign Transactions", url: "#", icon: PenTool, }, { title: "Sign Connector", url: "#", icon: LinkIcon, }, { title: "My Files", url: "#", icon: FolderOpen, }, ], } export function AppSidebar({ ...props }: React.ComponentProps) { const pathname = usePathname() const { open, setOpen } = useSidebar() return (

Conga {!open && ( setOpen(!open)} className="group-data-[collapsible=icon]:!p-2"> )} {data.navMain.map((item) => ( {item.title} {item.shortcut && {item.shortcut}} {item.badge && ( {item.badge} )} ))} Quotes & Orders {data.quotesOrders.map((item) => ( {item.title} ))} Contracts {data.contracts.map((item) => ( {item.title} ))} Billing {data.billing.map((item) => ( {item.title} ))} Documents {data.documents.map((item) => ( {item.title} ))}

{data.user.name.charAt(0).toUpperCase()}

{data.user.name} {data.user.role}

) } [V0_FILE]typescriptreact:file="src/components/page-header.tsx" isQuickEdit="true" import { BreadcrumbItem } from "@/components/ui/breadcrumb" import React from "react" import { Badge } from "@/components/ui/badge" import { Breadcrumb, BreadcrumbList, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb" import Link from "next/link" interface PageHeaderProps { title: string icon?: React.ReactNode breadcrumbs?: Array<{ label: string href?: string }> badges?: Array<{ label: string variant?: "default" | "secondary" | "destructive" | "outline" className?: string }> actions?: React.ReactNode[] className?: string } export function PageHeader({ title, icon, breadcrumbs, badges, actions, className = "" }: PageHeaderProps) { return (

{/* Main Header - consistent height and spacing */}

{/* Breadcrumb Navigation - only show if breadcrumbs exist */} {breadcrumbs && breadcrumbs.length > 0 && (

{breadcrumbs.map((crumb, index) => ( {crumb.href ? ( {crumb.label} ) : ( {crumb.label} )} {index < breadcrumbs.length - 1 && } ))}

)}

{icon}

{title}

{badges && badges.length > 0 && (

{badges.map((badge, index) => ( {badge.label} ))}

)}

{actions && actions.length > 0 && (

{actions}

)}

) } [V0_FILE]typescriptreact:file="src/utils/task-helpers.ts" isQuickEdit="true" import type { Task, TaskType, TaskStatus } from "../interfaces/Task" import { STATUS_AVAILABILITY } from "../constants/task-constants" export function getAvailableStatuses(taskType: TaskType): TaskStatus[] { return STATUS_AVAILABILITY[taskType] } export function canTransitionToStatus( currentStatus: TaskStatus, targetStatus: TaskStatus, taskType: TaskType, ): boolean { const availableStatuses = getAvailableStatuses(taskType) return availableStatuses.includes(targetStatus) } export function getValidStatusTransitions(currentStatus: TaskStatus, taskType: TaskType): TaskStatus[] { const availableStatuses = getAvailableStatuses(taskType) // Define workflow rules for status transitions const transitionRules: Record = { "In Draft": ["Not Started", "Cancelled"], "Not Started": ["In Progress", "Cancelled"], "In Progress": ["In Review", "Completed", "Cancelled"], "In Review": ["In Progress", "Completed", "Cancelled"], Completed: ["In Progress"], // Allow reopening Cancelled: ["Not Started", "In Progress"], // Allow reactivation } const allowedTransitions = transitionRules[currentStatus] || [] return allowedTransitions.filter((status) => availableStatuses.includes(status)) } export function requiresReasonForStatusChange(fromStatus: TaskStatus, toStatus: TaskStatus): boolean { const reasonRequiredTransitions = [ { from: "In Progress", to: "Cancelled" }, { from: "In Review", to: "In Progress" }, { from: "Completed", to: "In Progress" }, ] return reasonRequiredTransitions.some((rule) => rule.from === fromStatus && rule.to === toStatus) } export function isTaskOverdue(task: Task | null): boolean { if (!task || !task.dueDate || task.status === "Completed" || task.status === "Cancelled") { return false } return new Date(task.dueDate) < new Date() } export function shouldAutoTransition(task: Task): { status: TaskStatus; reason: string } | null { // Auto-complete overdue informational tasks if (task.taskType === "Informational" && task.notifyOn && new Date(task.notifyOn) < new Date()) { if (task.status === "Not Started") { return { status: "Completed", reason: "Auto-completed after notify date" } } } return null } export function getTaskStatusColor(status: TaskStatus): string { const statusColors: Record = { "In Draft": "text-text-softer", "Not Started": "text-text-information", "In Progress": "text-text-warning", "In Review": "text-text-accent-violet", Completed: "text-text-success", Cancelled: "text-text-danger", } return statusColors[status] } export function getTaskPriorityColor(priority: string): string { const priorityColors: Record = { High: "text-text-danger", Normal: "text-text-softer", Low: "text-text-success", } return priorityColors[priority] || "text-text-softer" } export function truncateText(text: string, maxLength: number): string { if (text.length <= maxLength) return text return text.substring(0, maxLength) + "..." } export function getCharacterCount( text: string, limit: number, ): { count: number; remaining: number; isOverLimit: boolean } { const count = text.length const remaining = limit - count const isOverLimit = count > limit return { count, remaining, isOverLimit } } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { RefreshCw, Bell, Calendar, CheckSquare, ArrowRight } from "lucide-react" import Link from "next/link" export default function HomePage() { const recentTasks = [ { id: "1", title: "Review Q4 Contract Terms #0001", assignee: "John Smith", priority: "High", status: "In Progress", taskType: "Actionable", dueDate: new Date("2025-01-20"), taskGroup: "Legal Review", }, { id: "2", title: "Follow up on Invoice #INV-2025-001", assignee: "Sarah Johnson", priority: "Normal", status: "Not Started", taskType: "Actionable", dueDate: new Date("2025-01-18"), taskGroup: "Finance", }, { id: "3", title: "Setup project kickoff meeting #0003", assignee: "Mike Chen", priority: "High", status: "Completed", taskType: "Informational", notifyOn: new Date("2025-01-15"), taskGroup: "Project Management", }, { id: "4", title: "Mobile App Performance Optimization #0004", assignee: "Alex Rodriguez", priority: "Low", status: "In Progress", taskType: "Actionable", dueDate: new Date("2025-01-25"), taskGroup: "Development", }, ] const getStatusBadge = (status: string) => { switch (status) { case "Completed": return Completed case "In Progress": return In Progress case "Not Started": return Not Started default: return ( {status} ) } } const formatDate = (date: Date) => { return date.toLocaleDateString("en-GB", { day: "2-digit", month: "2-digit", year: "numeric", }) } const getInitials = (name: string) => { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() } return (

Good Morning, Fname!

Thursday, September 18

Last updated: 11:20:27

TASKS

{recentTasks.slice(0, 4).map((task) => (

{task.title}

{getInitials(task.assignee)}

{task.assignee} • {task.taskGroup}

{getStatusBadge(task.status)}

{task.taskType === "Informational" ? ( ) : ( )} {formatDate(task.dueDate || task.notifyOn)}

))}

View All

) } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isQuickEdit="true" import type * as React from "react" import { cn } from "@/lib/utils" function Card({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return

} function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return

} function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return

} function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return

} export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } [V0_FILE]typescriptreact:file="src/components/task-card.tsx" isQuickEdit="true" "use client" import type { Task } from "../interfaces/Task" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Button } from "@/components/ui/button" import TaskStatusBadge from "./task-status-badge" import TaskPriorityBadge from "./task-priority-badge" import { formatDate, getDaysUntilDue } from "../utils/date-helpers" import { isTaskOverdue, truncateText } from "../utils/task-helpers" import { Calendar, User, Clock, ExternalLink, Layers } from "lucide-react" import Link from "next/link" import { ROUTES } from "../constants/routes" interface TaskCardProps { task: Task showActions?: boolean compact?: boolean className?: string } export default function TaskCard({ task, showActions = true, compact = false, className }: TaskCardProps) { const isOverdue = isTaskOverdue(task) const daysUntilDue = task.dueDate ? getDaysUntilDue(new Date(task.dueDate)) : null return (

{compact ? truncateText(task.title, 60) : task.title}

{task.taskGroup &&

{task.taskGroup}

} {task.source && (

{task.source === "Platform" ? "Platform Task" : task.source === "App Integration" ? `From ${task.sourceApp || "App"}` : task.source === "External Integration" ? `Via ${task.sourceApp || "Integration"}` : "Manual Task"}

)}

{/* Task metadata */}

{task.assignee}

{task.dueDate && (

{formatDate(task.dueDate)} {daysUntilDue !== null && ( ( {daysUntilDue === 0 ? "Due today" : daysUntilDue > 0 ? `${daysUntilDue}d left` : `${Math.abs(daysUntilDue)}d overdue`} ) )}

)} {task.taskType && (

{task.taskType}

)}

{/* Notes preview */} {task.notes && !compact &&

{truncateText(task.notes, 120)}

} {/* Linked work item */} {task.recordName && (

Linked to: {task.recordName}

)} {/* Actions */} {showActions && (

)}

) } [V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isQuickEdit="true" "use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { PanelLeftIcon } from "lucide-react" import { useIsMobile } from "@/hooks/use-mobile" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet" import { Skeleton } from "@/components/ui/skeleton" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_KEYBOARD_SHORTCUT = "b" type SidebarContextProps = { state: "expanded" | "collapsed" open: boolean setOpen: (open: boolean) => void openMobile: boolean setOpenMobile: (open: boolean) => void isMobile: boolean toggleSidebar: () => void } const SidebarContext = React.createContext(null) function useSidebar() { const context = React.useContext(SidebarContext) if (!context) { throw new Error("useSidebar must be used within a SidebarProvider.") } return context } function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & { defaultOpen?: boolean open?: boolean onOpenChange?: (open: boolean) => void }) { const isMobile = useIsMobile() const [openMobile, setOpenMobile] = React.useState(false) const [_open, _setOpen] = React.useState(() => { // Only read cookie on client side if (typeof document !== "undefined") { const cookies = document.cookie.split(";") const sidebarCookie = cookies.find((cookie) => cookie.trim().startsWith(`${SIDEBAR_COOKIE_NAME}=`)) if (sidebarCookie) { const value = sidebarCookie.split("=")[1] return value === "true" } } return defaultOpen }) console.log("[v0] Sidebar state initialized:", _open) const open = openProp ?? _open const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value console.log("[v0] Setting sidebar state to:", openState) if (setOpenProp) { setOpenProp(openState) } else { _setOpen(openState) } // This sets the cookie to keep the sidebar state. document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` console.log("[v0] Cookie set:", `${SIDEBAR_COOKIE_NAME}=${openState}`) }, [setOpenProp, open], ) // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) }, [isMobile, setOpen, setOpenMobile]) // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) { event.preventDefault() toggleSidebar() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [toggleSidebar]) // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed" const contextValue = React.useMemo( () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar], ) return (

{children}

) } function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }: React.ComponentProps<"div"> & { side?: "left" | "right" variant?: "sidebar" | "floating" | "inset" collapsible?: "offcanvas" | "icon" | "none" }) { const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (collapsible === "none") { return (

{children}

) } if (isMobile) { return ( Sidebar Displays the mobile sidebar.

{children}

) } return (

{/* This is what handles the sidebar gap on desktop */}

) } function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps) { const { toggleSidebar } = useSidebar() return ( ) } function SidebarRail({ className, ...props }: React.ComponentProps<"button">) { const { toggleSidebar } = useSidebar() return ( ) case "In Progress": return ( <> ) case "Completed": return ( <> ) case "Cancelled": return ( <> ) default: return ( <> ) } } if (loading) { return (

) } if (error || !task) { return (

{error || "Task not found"}

) } return (

} breadcrumbs={[{ label: "Tasks", href: ROUTES.TASKS }, { label: task.title }]} badges={[ { label: task.priority, variant: task.priority === "High" ? "destructive" : task.priority === "Medium" ? "default" : "secondary", className: "font-medium", }, { label: task.status, variant: task.status === "Completed" ? "default" : task.status === "In Progress" ? "default" : "outline", className: "font-medium", }, ]} actions={[ , , ]} />

Basic Information Core details and properties of this task

Title:

{task.title}

Priority:

{task.priority}

Task Type:

{task.taskType}

Task Group:

{task.taskGroup || "Legal Review"}

Status:

{task.status}

Work Item Integration Link this task to contracts, quotes, or orders

Object Name:

{task.objectType || "Contract"}

Record Name:

{task.recordName || "Enterprise Contract #2024-001"}

Assignment Task assignment and submission settings

Assignee Type:

{task.assigneeType}

Assignee:

{task.assignee}

Assign Task When:

{task.recordId && task.objectType ? (

Contract Approval

) : (

Immediate

)}

Dates & Scheduling Timeline and important dates for task completion

{task.taskType === "Informational" && (

Notify On:

{task.notifyOn ? formatDateTime(task.notifyOn) : "15/12/2025, 10:00:00"}

)} {(task.taskType === "Actionable" || task.taskType === "Verifiable") && (

Due Date:

{task.dueDate ? formatDateTime(task.dueDate) : "15/12/2025, 17:00:00"}

)} {(task.taskType === "Actionable" || task.taskType === "Verifiable") && (

Estimated Start Date:

{task.estimatedStartDate ? formatDateTime(task.estimatedStartDate) : "10/12/2025"}

)}

Actual Start Date:

{task.actualStartDate ? formatDateTime(task.actualStartDate) : "Not started yet"}

Date of Completion:

{task.dateOfCompletion ? formatDateTime(task.dateOfCompletion) : "Not completed yet"}

Additional Information Additional context and special instructions

Notes:

{task.notes || "Please review all contract terms, paying special attention to the service level agreements and penalty clauses. The client has requested expedited review due to year-end deadline constraints."}

Attachments Files and documents related to this task {task.attachments && task.attachments.length > 0 ? ( task.attachments.map((attachment) => (

{attachment.fileName}

({(attachment.fileSize / (1024 * 1024)).toFixed(1)} MB)

)) ) : ( <>

Q4_Contract_Draft_v2.pdf

(3.2 MB)

SLA_Requirements.docx

(1.1 MB)

)} Comments Discussion and updates from team members

{task.comments && task.comments.length > 0 ? ( task.comments.map((comment) => (

{comment.createdBy} - {formatDateTime(comment.createdOn)}

{comment.content}

)) ) : ( <>

John Smith - 08/12/2025, 16:15:00

Thanks Sarah. I'll start the review tomorrow morning and should have initial feedback by Wednesday.

Sarah Johnson - 08/12/2025, 14:30:00

I've added the updated contract draft. Please focus on sections 5.2 and 7.1 as discussed in our meeting.

)}

setNewComment(e.target.value)}
                    className="min-h-[80px] resize-none"
                  />
                  <div className="flex items-center justify-between">
                    <Button
                      onClick={handleAddComment}
                      disabled={!newComment.trim() || isSubmittingComment}
                      className="bg-blue-600 hover:bg-blue-700"
                    >
                      {isSubmittingComment ? "Adding..." : "Add Comment"}
                    </Button>
                    <span className="text-sm text-gray-500">Maximum 1000 characters</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="space-y-4">
            <Card>
              <CardHeader className="pb-4">
                <CardTitle className="text-xl font-semibold text-gray-700 mb-0 leading-tight">Quick Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {getQuickActions()}
                <div className="border-t pt-3 space-y-3">
                  <Button variant="outline" className="w-full flex items-center gap-2 text-blue-600 bg-transparent">
                    <RotateCcw className="h-4 w-4" />
                    Return to Creator
                  </Button>
                  <Button variant="outline" className="w-full flex items-center gap-2 text-blue-600 bg-transparent">
                    <Users className="h-4 w-4" />
                    Reassign to Anyone
                  </Button>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="pt-6 space-y-4">
                <div>
                  <div className="font-semibold text-gray-700">
                    Created By: <span className="font-normal">{task.createdBy}</span>
                  </div>
                  <div className="text-gray-600">{formatDateTime(task.createdOn)}</div>
                </div>
                <div>
                  <div className="font-semibold text-gray-700">
                    Modified By: <span className="font-normal">{task.modifiedBy}</span>
                  </div>
                  <div className="text-gray-600">{formatDateTime(task.modifiedOn)}</div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

<StatusUpdateDialog
        task={task}
        open={statusDialogOpen}
        onOpenChange={setStatusDialogOpen}
        onStatusUpdate={handleStatusUpdate}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tasks/new/page.tsx"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import TaskForm from "../../../src/components/task-form"
import type { TaskFormData } from "../../../src/interfaces/Task"
import { createTask } from "../../../src/api/tasks"
import { Plus, Save } from "lucide-react"
import { PageHeader } from "../../../src/components/page-header"
import { ROUTES } from "../../../src/constants/routes"
import { Button } from "@/components/ui/button"

export default function CreateTaskPage() {
  console.log("[v0] CreateTaskPage component is rendering")

const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [formRef, setFormRef] = useState<HTMLFormElement | null>(null)

const handleSubmit = async (data: TaskFormData) => {
    console.log("[v0] Form submitted with data:", data)
    setIsLoading(true)
    try {
      const response = await createTask(data)
      if (response.success) {
        router.push(ROUTES.TASKS)
      }
    } finally {
      setIsLoading(false)
    }
  }

const handleCancel = () => {
    console.log("[v0] Cancel button clicked")
    router.back()
  }

const handleCreateTask = () => {
    console.log("[v0] Create task button clicked")
    if (formRef) {
      formRef.requestSubmit()
    }
  }

console.log("[v0] About to render create task page")

return (
    <div className="min-h-screen bg-accent-gray-softer">
      <div className="px-4 py-4">
        <PageHeader
          title="Create New Task"
          icon={<Plus className="h-6 w-6 text-gray-600" />}
          breadcrumbs={[{ label: "Tasks", href: ROUTES.TASKS }, { label: "Create New Task" }]}
          actions={[
            <Button key="cancel" variant="outline" onClick={handleCancel} disabled={isLoading}>
              Cancel
            </Button>,
            <Button
              key="create"
              className="bg-blue-600 hover:bg-blue-700 text-white"
              onClick={handleCreateTask}
              disabled={isLoading}
            >
              <Save className="h-4 w-4 mr-2" />
              {isLoading ? "Saving..." : "Create Task"}
            </Button>,
          ]}
        />

<div className="py-1">
          <div className="w-full">
            <TaskForm
              ref={(ref: HTMLFormElement) => setFormRef(ref)}
              onSubmit={handleSubmit}
              onCancel={handleCancel}
              isLoading={isLoading}
            />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="src/components/task-list.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect, useMemo } from "react"
import { useRouter } from "next/navigation"
import type { Task, TaskFilters as TaskFiltersType, TaskSortOptions } from "../interfaces/Task"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip"
import { PageHeader } from "./page-header"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { ROUTES } from "../constants/routes"
import {
  Search,
  Filter,
  List,
  Grid,
  MoreHorizontal,
  ChevronLeft,
  ChevronRight,
  CheckSquare,
  CheckCircle,
  Clock,
  Circle,
  XCircle,
  ExternalLink,
  Calendar,
  Bell,
  Plus,
  Link,
} from "lucide-react"

interface TaskListProps {
  className?: string
}

export default function TaskList({ className }: TaskListProps) {
  const router = useRouter()
  const [allTasks, setAllTasks] = useState<Task[]>([]) // Store all tasks separately
  const [loading, setLoading] = useState(true)
  const [selectedTasks, setSelectedTasks] = useState<string[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [viewMode, setViewMode] = useState<"list" | "grid">("list")
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 25,
    total: 1247,
    totalPages: 50,
  })

const [filters, setFilters] = useState<TaskFiltersType>({})
  const [sortOptions, setSortOptions] = useState<TaskSortOptions>({
    field: "dueDate",
    direction: "asc",
  })

const generateMockTasks = (): Task[] => {
    const taskTitles = [
      "Review Q4 Contract Terms",
      "Follow up on Invoice #INV-2025-001",
      "Setup project kickoff meeting",
      "Mobile App Performance Optimization",
      "Database Migration Planning",
      "Customer Support Dashboard",
      "Security Audit Implementation",
      "Email Template Redesign",
      "Payment Gateway Integration",
      "Content Management System",
      "API Rate Limiting",
      "User Onboarding Flow",
      "Backup System Upgrade",
      "Social Media Integration",
      "Performance Monitoring Setup",
      "Code Review Process",
      "Bug Fix Priority List",
      "Feature Requirements Analysis",
      "System Architecture Design",
      "Data Analytics Dashboard",
      "User Interface Improvements",
      "Third-party API Integration",
      "Load Testing Implementation",
      "Documentation Updates",
      "Training Material Creation",
      "Quality Assurance Testing",
      "Deployment Pipeline Setup",
      "Monitoring Alert Configuration",
      "Database Optimization",
      "Cache Implementation",
      "Error Handling Enhancement",
      "Accessibility Compliance",
      "SEO Optimization",
      "Performance Benchmarking",
      "Security Vulnerability Assessment",
      "Compliance Audit",
      "Disaster Recovery Planning",
      "Backup Verification",
      "System Health Check",
      "User Feedback Analysis",
      "Market Research Study",
      "Competitive Analysis",
      "Product Roadmap Planning",
      "Budget Planning Review",
      "Resource Allocation",
      "Team Performance Review",
      "Process Improvement",
      "Workflow Automation",
      "Integration Testing",
      "Regression Testing",
      "User Acceptance Testing",
    ]

const assignees = [
      "John Smith",
      "Sarah Johnson",
      "Mike Chen",
      "Alex Rodriguez",
      "Emma Wilson",
      "David Kim",
      "Lisa Thompson",
      "Michael Brown",
      "Jennifer Lee",
      "Robert Garcia",
      "Amanda Davis",
      "Kevin Martinez",
      "Rachel White",
      "Thomas Anderson",
      "Nicole Taylor",
      "Christopher Wilson",
      "Jessica Miller",
      "Daniel Moore",
      "Ashley Taylor",
      "Matthew Jackson",
      "Stephanie White",
      "Andrew Harris",
      "Michelle Martin",
      "Joshua Thompson",
      "Amanda Garcia",
      "Brandon Rodriguez",
      "Samantha Lewis",
      "Tyler Walker",
      "Kimberly Hall",
      "Jonathan Allen",
    ]

const taskGroups = [
      "Legal Review",
      "Finance",
      "Project Management",
      "Development",
      "Infrastructure",
      "Customer Support",
      "Security",
      "Marketing",
      "Product",
      "Design",
      "Operations",
      "Quality Assurance",
      "Analytics",
      "Compliance",
      "Research",
      "Training",
    ]

const statuses = ["Not Started", "In Progress", "Completed", "Cancelled"]
    const priorities = ["High", "Normal", "Low"]
    const taskTypes = ["Actionable", "Informational", "Review"]

const workItemTypes = ["Bug", "Feature", "Story", "Epic", "Task"]
    const workItemCategories = ["Development", "Testing", "Documentation", "Research", "Design"]

const mockObjects = ["Contract", "Quote", "Order", "Invoice", "Purchase Order", "Service Agreement", "Proposal"]

const mockRecords = [
      { id: "contract-1", name: "Enterprise Contract #2024-001", type: "Contract", category: "Legal" },
      { id: "contract-2", name: "Service Agreement #SA-2024-15", type: "Contract", category: "Legal" },
      { id: "contract-3", name: "Master Service Agreement", type: "Contract", category: "Legal" },
      { id: "quote-1", name: "Q4 Pricing Quote #Q2024-789", type: "Quote", category: "Sales" },
      { id: "quote-2", name: "Enterprise Software Quote", type: "Quote", category: "Sales" },
      { id: "order-1", name: "Order #ORD-2024-456", type: "Order", category: "Fulfillment" },
      { id: "order-2", name: "Bulk Equipment Order", type: "Order", category: "Fulfillment" },
      { id: "invoice-1", name: "Invoice #INV-2024-123", type: "Invoice", category: "Finance" },
      { id: "po-1", name: "Purchase Order #PO-2024-890", type: "Purchase Order", category: "Procurement" },
    ]

const tasks: Task[] = []

for (let i = 1; i <= 1247; i++) {
      const randomTitle = taskTitles[Math.floor(Math.random() * taskTitles.length)]
      const randomAssignee = assignees[Math.floor(Math.random() * assignees.length)]
      const randomGroup = taskGroups[Math.floor(Math.random() * taskGroups.length)]
      const randomStatus = statuses[Math.floor(Math.random() * statuses.length)]
      const randomPriority = priorities[Math.floor(Math.random() * priorities.length)]
      const randomTaskType = taskTypes[Math.floor(Math.random() * taskTypes.length)]

// Generate random dates within the next 3 months
      const randomDays = Math.floor(Math.random() * 90)
      const dueDate = new Date()
      dueDate.setDate(dueDate.getDate() + randomDays)

const createdDate = new Date()
      createdDate.setDate(createdDate.getDate() - Math.floor(Math.random() * 30))

const taskData: Task = {
        id: i.toString(),
        title: `${randomTitle} #${i.toString().padStart(4, "0")}`,
        status: randomStatus,
        priority: randomPriority,
        taskType: randomTaskType,
        submissionTrigger: "Manual",
        assigneeType: "User",
        assignee: randomAssignee,
        assigneeId: `user${i}`,
        createdBy: "admin",
        createdOn: createdDate,
        modifiedBy: "admin",
        modifiedOn: createdDate,
        taskGroup: randomGroup,
      }

if (Math.random() < 0.3) {
        const randomRecord = mockRecords[Math.floor(Math.random() * mockRecords.length)]

taskData.recordId = randomRecord.id
        taskData.recordName = randomRecord.name
        taskData.objectType = randomRecord.type
        taskData.objectCategory = randomRecord.category
      }

// Set appropriate date based on task type
      if (randomTaskType === "Informational") {
        taskData.notifyOn = dueDate
      } else {
        taskData.dueDate = dueDate
      }

tasks.push(taskData)
    }

return tasks
  }

useEffect(() => {
    // Mock loading
    setTimeout(() => {
      const generatedTasks = generateMockTasks()
      setAllTasks(generatedTasks)
      setLoading(false)
    }, 500)
  }, [])

const sortedAndFilteredTasks = useMemo(() => {
    let filtered = [...allTasks]

// Apply search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (task) =>
          task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
          task.assignee.toLowerCase().includes(searchQuery.toLowerCase()) ||
          task.taskGroup.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Apply sorting
    filtered.sort((a, b) => {
      let aValue: any = a[sortOptions.field]
      let bValue: any = b[sortOptions.field]

// Handle date sorting
      if (sortOptions.field === "dueDate") {
        aValue = new Date(a.dueDate || a.notifyOn).getTime()
        bValue = new Date(b.dueDate || b.notifyOn).getTime()
      }

// Handle string sorting
      if (typeof aValue === "string") {
        aValue = aValue.toLowerCase()
        bValue = bValue.toLowerCase()
      }

if (aValue < bValue) {
        return sortOptions.direction === "asc" ? -1 : 1
      }
      if (aValue > bValue) {
        return sortOptions.direction === "asc" ? 1 : -1
      }
      return 0
    })

return filtered
  }, [allTasks, searchQuery, sortOptions])

const currentPageTasks = useMemo(() => {
    const startIndex = (pagination.page - 1) * pagination.limit
    const endIndex = startIndex + pagination.limit
    return sortedAndFilteredTasks.slice(startIndex, endIndex)
  }, [sortedAndFilteredTasks, pagination.page, pagination.limit])

useEffect(() => {
    const newTotalPages = Math.ceil(sortedAndFilteredTasks.length / pagination.limit)
    setPagination((prev) => ({
      ...prev,
      total: sortedAndFilteredTasks.length,
      totalPages: newTotalPages,
      page: prev.page > newTotalPages ? 1 : prev.page,
    }))
  }, [sortedAndFilteredTasks.length, pagination.limit])

const getStatusBadge = (status: string) => {
    switch (status) {
      case "Completed":
        return (
          <Badge className="bg-green-100 text-green-800 hover:bg-green-100 flex items-center gap-1">
            <CheckCircle className="h-3 w-3" />
            Completed
          </Badge>
        )
      case "In Progress":
        return (
          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100 flex items-center gap-1">
            <Clock className="h-3 w-3" />
            In Progress
          </Badge>
        )
      case "Not Started":
        return (
          <Badge className="bg-gray-100 text-gray-800 hover:bg-gray-100 flex items-center gap-1">
            <Circle className="h-3 w-3" />
            Not Started
          </Badge>
        )
      case "Cancelled":
        return (
          <Badge className="bg-red-100 text-red-800 hover:bg-red-100 flex items-center gap-1">
            <XCircle className="h-3 w-3" />
            Cancelled
          </Badge>
        )
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const getPriorityBadge = (priority: string) => {
    switch (priority) {
      case "High":
        return <Badge className="bg-red-100 text-red-700 border-red-200">High</Badge>
      case "Normal":
        return <Badge className="bg-blue-100 text-blue-700 border-blue-200">Normal</Badge>
      case "Low":
        return <Badge className="bg-green-100 text-green-700 border-green-200">Low</Badge>
      default:
        return <Badge variant="secondary">{priority}</Badge>
    }
  }

const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    })
  }

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
  }

const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedTasks(currentPageTasks.map((task) => task.id))
    } else {
      setSelectedTasks([])
    }
  }

const handleSelectTask = (taskId: string, checked: boolean) => {
    if (checked) {
      setSelectedTasks([...selectedTasks, taskId])
    } else {
      setSelectedTasks(selectedTasks.filter((id) => id !== taskId))
    }
  }

const handlePageChange = (page: number) => {
    setPagination((prev) => ({ ...prev, page }))
    console.log(`[v0] Navigating to page ${page}`)
  }

const handleRowsPerPageChange = (limit: string) => {
    const newLimit = Number.parseInt(limit)
    const newTotalPages = Math.ceil(sortedAndFilteredTasks.length / newLimit)
    setPagination((prev) => ({
      ...prev,
      limit: newLimit,
      page: 1, // Reset to first page
      totalPages: newTotalPages,
    }))
    console.log(`[v0] Changed rows per page to ${newLimit}`)
  }

const handleTaskAction = (taskId: string, action: string) => {
    console.log(`[v0] Task action: ${action} on task ${taskId}`)
    // In a real app, this would trigger API calls
    switch (action) {
      case "view":
        router.push(`/tasks/${taskId}`)
        break
      case "edit":
        // Open edit modal or navigate to edit page
        break
      case "assign":
        // Open assignment modal
        break
      case "delete":
        // Show confirmation and delete task
        setAllTasks((prev) => prev.filter((task) => task.id !== taskId))
        break
    }
  }

const handleBulkAction = (action: string) => {
    console.log(`[v0] Bulk action: ${action} on ${selectedTasks.length} tasks`)
    // Handle bulk operations
  }

const handleSort = (field: string) => {
    setSortOptions((prev) => ({
      field: field as TaskSortOptions["field"],
      direction: prev.field === field && prev.direction === "asc" ? "desc" : "asc",
    }))
    console.log(`[v0] Sorting by ${field}`)
  }

const getSortIcon = (field: string) => {
    if (sortOptions.field !== field) {
      return <span className="text-gray-400">↕</span>
    }
    return sortOptions.direction === "asc" ? (
      <span className="text-blue-600">↑</span>
    ) : (
      <span className="text-blue-600">↓</span>
    )
  }

const startItem = (pagination.page - 1) * pagination.limit + 1
  const endItem = Math.min(pagination.page * pagination.limit, pagination.total)

const canGoPrevious = pagination.page > 1
  const canGoNext = pagination.page < pagination.totalPages

const getPageNumbers = () => {
    const pages = []
    const currentPage = pagination.page
    const totalPages = pagination.totalPages

if (totalPages <= 7) {
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i)
      }
    } else {
      if (currentPage <= 4) {
        pages.push(1, 2, 3, 4, 5, "...", totalPages)
      } else if (currentPage >= totalPages - 3) {
        pages.push(1, "...", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages)
      } else {
        pages.push(1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages)
      }
    }

return pages
  }

const renderDateWithType = (task: Task) => {
    const isInformational = task.taskType === "Informational"
    const date = isInformational ? task.notifyOn : task.dueDate

if (!date) return <span className="text-gray-400">N/A</span>

const formattedDate = formatDate(date)
    const icon = isInformational ? (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <Bell className="h-3 w-3 text-blue-600 cursor-help" />
          </TooltipTrigger>
          <TooltipContent>
            <p>Notify</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    ) : (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <Calendar className="h-3 w-3 text-red-600 cursor-help" />
          </TooltipTrigger>
          <TooltipContent>
            <p>Due</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    )

return (
      <div className="flex items-center gap-2">
        {icon}
        <span className="text-sm">{formattedDate}</span>
      </div>
    )
  }

const renderCardView = () => {
    return (
      <div className="px-4 pb-0">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
          {currentPageTasks.map((task) => (
            <Card
              key={task.id}
              className="p-4 sm:p-6 bg-white border border-gray-200 hover:shadow-md transition-shadow"
            >
              <div className="space-y-3">
                {/* Header with icon and title */}
                <div className="flex items-center gap-2">
                  <div className="w-6 h-6 bg-blue-50 border border-blue-200 rounded flex items-center justify-center flex-shrink-0">
                    <CheckSquare className="h-4 w-4 text-blue-600" />
                  </div>
                  <h3
                    className="font-medium text-blue-600 text-sm flex-1 cursor-pointer hover:text-blue-800 transition-colors line-clamp-2"
                    onClick={() => handleTaskAction(task.id, "view")}
                  >
                    {task.title}
                    {task.recordId && (
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Link className="h-3 w-3 text-blue-500 cursor-help flex-shrink-0 ml-2 inline" />
                          </TooltipTrigger>
                          <TooltipContent>
                            <div className="text-sm">
                              <div>
                                <span className="font-medium">Object:</span> {task.objectType}
                              </div>
                              <div>
                                <span className="font-medium">Record:</span> {task.recordName}
                              </div>
                            </div>
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    )}
                  </h3>
                </div>

{/* Status badge */}
                <div className="flex justify-start">{getStatusBadge(task.status)}</div>

{/* Priority level */}
                <div className="flex justify-start">{getPriorityBadge(task.priority)}</div>

{/* Assignee */}
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-medium flex-shrink-0">
                    {getInitials(task.assignee)}
                  </div>
                  <span className="truncate">{task.assignee}</span>
                </div>

{/* Due Date */}
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <span className="font-medium flex-shrink-0">Date:</span>
                  {renderDateWithType(task)}
                </div>

{/* Task Type */}
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <span className="font-medium flex-shrink-0">Type:</span>
                  <span className="truncate">{task.taskType}</span>
                </div>

{/* Task Group */}
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <span className="font-medium flex-shrink-0">Group:</span>
                  <span className="truncate">{task.taskGroup}</span>
                </div>

{/* View Details button */}
                <Button
                  variant="outline"
                  className="w-full mt-4 text-sm border-gray-300 bg-gray-50 hover:bg-gray-100"
                  onClick={() => handleTaskAction(task.id, "view")}
                >
                  View Details
                  <ExternalLink className="h-4 w-4 ml-2" />
                </Button>
              </div>
            </Card>
          ))}
        </div>
      </div>
    )
  }

const renderTableView = () => {
    return (
      <div className="px-4 pb-0">
        <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[800px]">
              <thead className="bg-white border-b border-gray-200">
                <tr>
                  <th className="w-12 px-4 py-2 text-left">
                    <Checkbox
                      checked={selectedTasks.length === currentPageTasks.length && currentPageTasks.length > 0}
                      onCheckedChange={handleSelectAll}
                      className="border-gray-300"
                    />
                  </th>
                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900 min-w-[200px]">
                    <button className="flex items-center gap-1 hover:text-blue-600" onClick={() => handleSort("title")}>
                      Title
                      {getSortIcon("title")}
                    </button>
                  </th>
                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900 min-w-[120px]">Task Type</th>
                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900 min-w-[150px]">
                    <button
                      className="flex items-center gap-1 hover:text-blue-600"
                      onClick={() => handleSort("assignee")}
                    >
                      Assignee
                      {getSortIcon("assignee")}
                    </button>
                  </th>
                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900 min-w-[100px]">
                    <button
                      className="flex items-center gap-1 hover:text-blue-600"
                      onClick={() => handleSort("priority")}
                    >
                      Priority
                      {getSortIcon("priority")}
                    </button>
                  </th>
                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900 min-w-[120px]">Status</th>
                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900 min-w-[120px]">
                    <button
                      className="flex items-center gap-1 hover:text-blue-600"
                      onClick={() => handleSort("dueDate")}
                    >
                      Due Date
                      {getSortIcon("dueDate")}
                    </button>
                  </th>
                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900 min-w-[140px]">Task Group</th>
                  <th className="w-12 px-4 py-2"></th>
                </tr>
              </thead>
              <tbody className="bg-white">
                {currentPageTasks.map((task, index) => (
                  <tr
                    key={task.id}
                    className={`hover:bg-gray-50 ${index !== currentPageTasks.length - 1 ? "border-b border-gray-200" : ""}`}
                  >
                    <td className="px-4 py-3">
                      <Checkbox
                        checked={selectedTasks.includes(task.id)}
                        onCheckedChange={(checked) => handleSelectTask(task.id, checked as boolean)}
                        className="border-gray-300"
                      />
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <div
                          className="font-normal text-blue-600 hover:text-blue-800 cursor-pointer text-sm flex items-center gap-2"
                          onClick={() => handleTaskAction(task.id, "view")}
                        >
                          <span className="truncate max-w-[180px]">{task.title}</span>
                          {task.recordId && (
                            <TooltipProvider>
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <Link className="h-3 w-3 text-blue-500 cursor-help flex-shrink-0" />
                                </TooltipTrigger>
                                <TooltipContent>
                                  <div className="text-sm">
                                    <div>
                                      <span className="font-medium">Object:</span> {task.objectType}
                                    </div>
                                    <div>
                                      <span className="font-medium">Record:</span> {task.recordName}
                                    </div>
                                  </div>
                                </TooltipContent>
                              </Tooltip>
                            </TooltipProvider>
                          )}
                        </div>
                      </div>
                    </td>
                    <td className="px-4 py-3">{renderTaskType(task)}</td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <Avatar className="h-6 w-6 flex-shrink-0">
                          <AvatarFallback className="bg-blue-500 text-white text-xs font-medium">
                            {getInitials(task.assignee)}
                          </AvatarFallback>
                        </Avatar>
                        <span className="text-sm text-gray-900 truncate max-w-[120px]">{task.assignee}</span>
                      </div>
                    </td>
                    <td className="px-4 py-3">{getPriorityBadge(task.priority)}</td>
                    <td className="px-4 py-3">{getStatusBadge(task.status)}</td>
                    <td className="px-4 py-3">{renderDateColumn(task)}</td>
                    <td className="px-4 py-3 text-sm text-gray-900">
                      <span className="truncate max-w-[120px] block">{task.taskGroup}</span>
                    </td>
                    <td className="px-4 py-3">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-black hover:text-black hover:bg-gray-200 border-0 bg-transparent rounded-md"
                          >
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => handleTaskAction(task.id, "view")}>
                            View Task
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleTaskAction(task.id, "edit")}>
                            Edit Task
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleTaskAction(task.id, "assign")}>
                            Assign
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            className="text-red-600"
                            onClick={() => handleTaskAction(task.id, "delete")}
                          >
                            Delete Task
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    )
  }

const renderDateColumn = (task: Task) => {
    const isInformational = task.taskType === "Informational"

if (isInformational) {
      return <span className="text-sm text-gray-400">NA</span>
    }

const date = task.dueDate
    if (!date) return <span className="text-sm text-gray-400">N/A</span>

return <span className="text-sm text-gray-900">{formatDate(date)}</span>
  }

const renderTaskType = (task: Task) => {
    const isInformational = task.taskType === "Informational"

if (isInformational && task.notifyOn) {
      return (
        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-900">{task.taskType}</span>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Bell className="h-4 w-4 text-blue-600 cursor-help" />
              </TooltipTrigger>
              <TooltipContent>
                <p>Notify on: {formatDate(task.notifyOn)}</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
      )
    }

return <span className="text-sm text-gray-900">{task.taskType}</span>
  }

if (loading) {
    return (
      <div className="min-h-screen bg-accent-gray-softer">
        <PageHeader title="Tasks" icon={<CheckSquare className="h-6 w-6 text-gray-600" />} />
        <div className="p-6">
          <Card className="p-6">
            <div className="animate-pulse space-y-4">
              <div className="h-8 bg-gray-200 rounded w-1/4"></div>
              <div className="h-64 bg-gray-200 rounded"></div>
            </div>
          </Card>
        </div>
      </div>
    )
  }

return (
    <div className={`min-h-screen bg-accent-gray-softer ${className}`}>
      <PageHeader
        title="Tasks"
        icon={<CheckSquare className="h-6 w-6 text-gray-600" />}
        actions={[
          <Button
            key="create"
            className="bg-blue-600 hover:bg-blue-700 text-white flex items-center"
            onClick={() => router.push(ROUTES.TASK_CREATE)}
          >
            <Plus className="h-4 w-4 mr-2" />
            <span className="hidden sm:inline">New Task</span>
            <span className="sm:hidden">New</span>
          </Button>,
        ]}
      />

<div className="px-2 sm:px-6 pb-6">
        <Card className="bg-white shadow-sm border border-gray-200">
          <div className="flex flex-col sm:flex-row sm:items-center pt-4 px-4 pb-4 gap-3 sm:gap-2">
            <div className="flex flex-col sm:flex-row gap-3 sm:gap-2 flex-1">
              <Select defaultValue="all">
                <SelectTrigger className="w-full sm:w-[140px] h-9 bg-white border-gray-300">
                  <SelectValue placeholder="All Tasks" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Tasks</SelectItem>
                  <SelectItem value="active">Active Tasks</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="overdue">Overdue</SelectItem>
                </SelectContent>
              </Select>

<div className="relative flex-1 sm:max-w-[320px]">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search Items..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 h-9 bg-white border-gray-300"
                />
              </div>

<div className="flex items-center justify-between sm:justify-end gap-2">
              <div className="flex items-center gap-0">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setViewMode("list")}
                  className={`h-9 w-9 rounded-md border-0 ${
                    viewMode === "list"
                      ? "bg-blue-100 text-blue-600 hover:bg-blue-100"
                      : "bg-transparent text-gray-600 hover:bg-gray-100"
                  }`}
                >
                  <List className="h-4 w-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setViewMode("grid")}
                  className={`h-9 w-9 rounded-md border-0 ml-2 ${
                    viewMode === "grid"
                      ? "bg-blue-100 text-blue-600 hover:bg-blue-100"
                      : "bg-transparent text-gray-600 hover:bg-gray-100"
                  }`}
                >
                  <Grid className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>

{viewMode === "list" ? renderTableView() : renderCardView()}

<div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
              <span className="text-sm text-gray-700 text-center sm:text-left">
                {startItem}-{endItem} of {pagination.total}
              </span>

<div className="flex items-center gap-1 justify-center flex-wrap">
                <Button
                  variant="outline"
                  size="sm"
                  className="h-8 px-2 sm:px-3 text-sm border-gray-300 bg-transparent"
                  disabled={!canGoPrevious}
                  onClick={() => handlePageChange(pagination.page - 1)}
                >
                  <ChevronLeft className="h-4 w-4 sm:mr-1" />
                  <span className="hidden sm:inline">Previous</span>
                </Button>

<div className="flex items-center gap-1 max-w-[200px] sm:max-w-none overflow-x-auto">
                  {getPageNumbers().map((page, index) =>
                    page === "..." ? (
                      <span key={`ellipsis-${index}`} className="px-1 text-gray-400">
                        ...
                      </span>
                    ) : (
                      <Button
                        key={page}
                        variant={pagination.page === page ? "default" : "outline"}
                        size="sm"
                        className={`h-8 w-8 flex-shrink-0 ${
                          pagination.page === page ? "bg-blue-600 hover:bg-blue-700" : "border-gray-300 bg-transparent"
                        }`}
                        onClick={() => handlePageChange(page as number)}
                      >
                        {page}
                      </Button>
                    ),
                  )}
                </div>

<Button
                  variant="outline"
                  size="sm"
                  className="h-8 px-2 sm:px-3 text-sm border-gray-300 bg-transparent"
                  disabled={!canGoNext}
                  onClick={() => handlePageChange(pagination.page + 1)}
                >
                  <span className="hidden sm:inline">Next</span>
                  <ChevronRight className="h-4 w-4 sm:ml-1" />
                </Button>
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="src/components/task-attachments.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import type { TaskAttachment } from "../interfaces/Task"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { formatDateTime } from "../utils/date-helpers"
import { Upload, Download, Trash2, File, ImageIcon, Video, FileText } from "lucide-react"

interface TaskAttachmentsProps {
  attachments: TaskAttachment[]
  onUpload: (files: FileList) => Promise<void>
  onDelete: (attachmentId: string) => Promise<void>
  onDownload: (attachment: TaskAttachment) => void
  isUploading?: boolean
  uploadProgress?: number
  className?: string
}

export default function TaskAttachments({
  attachments,
  onUpload,
  onDelete,
  onDownload,
  isUploading = false,
  uploadProgress = 0,
  className,
}: TaskAttachmentsProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [dragOver, setDragOver] = useState(false)

const getFileIcon = (fileType: string) => {
    if (fileType.startsWith("image/")) return <ImageIcon className="h-5 w-5" />
    if (fileType.startsWith("video/")) return <Video className="h-5 w-5" />
    if (fileType.includes("pdf") || fileType.includes("document")) return <FileText className="h-5 w-5" />
    return <File className="h-5 w-5" />
  }

const formatFileSize = (bytes: number) => {
    if (bytes === 0) return "0 Bytes"
    const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
  }

const handleFileSelect = () => {
    fileInputRef.current?.click()
  }

const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files && files.length > 0) {
      await onUpload(files)
      // Reset input
      e.target.value = ""
    }
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(true)
  }

const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(false)
  }

const handleDrop = async (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(false)

const files = e.dataTransfer.files
    if (files && files.length > 0) {
      await onUpload(files)
    }
  }

return (
    <div className={`space-y-4 ${className || ""}`}>
      {/* Upload Area */}
      <div
        className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
          dragOver ? "border-primary bg-primary/5" : "border-muted-foreground/25"
        } ${isUploading ? "opacity-50" : "cursor-pointer hover:border-primary hover:bg-primary/5"}`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={!isUploading ? handleFileSelect : undefined}
      >
        <Upload className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
        <p className="text-sm text-muted-foreground mb-1">
          {isUploading ? "Uploading..." : "Drop files here or click to upload"}
        </p>
        <p className="text-xs text-muted-foreground mb-3">Supports documents, images, and videos</p>

<Button
          onClick={handleFileSelect}
          size="sm"
          disabled={isUploading}
          variant="outline"
          className="mt-2 bg-transparent"
        >
          <Upload className="h-4 w-4 mr-1" />
          Upload Files
        </Button>

{isUploading && (
          <div className="mt-4">
            <Progress value={uploadProgress} className="w-full" />
            <p className="text-xs text-muted-foreground mt-1">{uploadProgress}% complete</p>
          </div>
        )}
      </div>

{/* Hidden File Input */}
      <input
        ref={fileInputRef}
        type="file"
        multiple
        className="hidden"
        onChange={handleFileChange}
        accept="image/*,video/*,.pdf,.doc,.docx,.txt,.csv,.xlsx"
      />

{/* Attachments List */}
      {attachments.length > 0 && (
        <div className="space-y-2">
          {attachments.map((attachment) => (
            <div key={attachment.id} className="flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/50">
              <div className="text-muted-foreground">{getFileIcon(attachment.fileType)}</div>

<div className="flex-1 min-w-0">
                <p className="font-medium truncate">{attachment.fileName}</p>
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <span>{formatFileSize(attachment.fileSize)}</span>
                  <span>•</span>
                  <span>Uploaded by {attachment.uploadedBy}</span>
                  <span>•</span>
                  <span>{formatDateTime(attachment.uploadedOn)}</span>
                </div>
              </div>

<div className="flex items-center gap-1">
                <Button variant="ghost" size="sm" onClick={() => onDownload(attachment)} className="h-8 w-8 p-0">
                  <Download className="h-4 w-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => onDelete(attachment.id)}
                  className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tasks/[id]/edit/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import TaskForm from "../../../../src/components/task-form"
import type { Task, TaskFormData } from "../../../../src/interfaces/Task"
import { getTask, updateTask } from "../../../../src/api/tasks"
import { Skeleton } from "@/components/ui/skeleton"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Edit, AlertCircle, Save } from "lucide-react"
import { Button } from "@/components/ui/button"
import { PageHeader } from "../../../../src/components/page-header"
import { ROUTES } from "../../../../src/constants/routes"

export default function EditTaskPage() {
  const params = useParams()
  const router = useRouter()
  const taskId = params.id as string

const [task, setTask] = useState<Task | null>(null)
  const [loading, setLoading] = useState(true)
  const [isLoading, setIsLoading] = useState(false)
  const [formRef, setFormRef] = useState<HTMLFormElement | null>(null)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const loadTask = async () => {
      try {
        const response = await getTask(taskId)
        if (response.success && response.data) {
          setTask(response.data)
        } else {
          setError("Task not found")
        }
      } catch (err) {
        setError("Failed to load task")
      } finally {
        setLoading(false)
      }
    }

if (taskId) {
      loadTask()
    }
  }, [taskId])

const handleSubmit = async (data: TaskFormData) => {
    if (!task) return

setIsLoading(true)
    try {
      const response = await updateTask(task.id, data)
      if (response.success) {
        router.push(ROUTES.TASK_VIEW(task.id))
      }
    } finally {
      setIsLoading(false)
    }
  }

const handleCancel = () => {
    if (task) {
      router.push(ROUTES.TASK_VIEW(task.id))
    } else {
      router.push(ROUTES.TASKS)
    }
  }

const handleUpdateTask = () => {
    if (formRef) {
      formRef.requestSubmit()
    }
  }

if (loading) {
    return (
      <div className="min-h-screen bg-accent-gray-softer">
        <div className="px-4 py-4">
          <div className="space-y-6">
            <Skeleton className="h-10 w-48" />
            <div className="w-full space-y-6">
              <Skeleton className="h-64" />
              <Skeleton className="h-48" />
              <Skeleton className="h-32" />
            </div>
          </div>
        </div>
      </div>
    )
  }

if (error || !task) {
    return (
      <div className="min-h-screen bg-accent-gray-softer">
        <div className="px-4 py-4">
          <div className="max-w-md mx-auto">
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error || "Task not found"}</AlertDescription>
            </Alert>
            <div className="mt-4 text-center">
              <Button onClick={() => router.push(ROUTES.TASKS)}>Back to Tasks</Button>
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-accent-gray-softer">
      <div className="px-4 py-4">
        <PageHeader
          title="Edit Task"
          icon={<Edit className="h-6 w-6 text-gray-600" />}
          breadcrumbs={[
            { label: "Tasks", href: ROUTES.TASKS },
            { label: task.title, href: ROUTES.TASK_VIEW(task.id) },
            { label: "Edit" },
          ]}
          actions={[
            <Button key="cancel" variant="outline" onClick={handleCancel} disabled={isLoading}>
              Cancel
            </Button>,
            <Button
              key="update"
              className="bg-blue-600 hover:bg-blue-700 text-white"
              onClick={handleUpdateTask}
              disabled={isLoading}
            >
              <Save className="h-4 w-4 mr-2" />
              {isLoading ? "Updating..." : "Update Task"}
            </Button>,
          ]}
        />

<div className="py-1">
          <div className="w-full">
            <TaskForm
              ref={(ref: HTMLFormElement) => setFormRef(ref)}
              task={task}
              onSubmit={handleSubmit}
              onCancel={handleCancel}
              isLoading={isLoading}
            />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="src/components/task-form.tsx" isQuickEdit="true"
"use client"

import type React from "react"
import { useState, useEffect, forwardRef } from "react"
import type {
  Task,
  TaskFormData,
  TaskFormErrors,
  TaskType,
  User,
  UserGroup,
  WorkItem,
  TaskAttachment,
} from "../interfaces/Task"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { getCharacterCount } from "../utils/task-helpers"
import { getDefaultDueDate, getDefaultNotifyDate, isValidFutureDate } from "../utils/date-helpers"
import {
  TASK_TYPES,
  TASK_PRIORITIES,
  ASSIGNEE_TYPES,
  CHARACTER_LIMITS,
  DEFAULT_VALUES,
  FIELD_AVAILABILITY,
} from "../constants/task-constants"
import { AlertCircle, Search, CalendarIcon } from "lucide-react"
import TaskAttachments from "./task-attachments"
import { format } from "date-fns"

interface TaskFormProps {
  task?: Task
  onSubmit: (data: TaskFormData) => Promise<void>
  onCancel: () => void
  isLoading?: boolean
  className?: string
}

const TaskForm = forwardRef<HTMLFormElement, TaskFormProps>(
  ({ task, onSubmit, onCancel, isLoading = false, className }, ref) => {
    const [formData, setFormData] = useState<TaskFormData>({
      title: task?.title || "",
      priority: task?.priority || DEFAULT_VALUES.PRIORITY,
      taskType: task?.taskType || "Actionable",
      submissionTrigger: task?.submissionTrigger || DEFAULT_VALUES.SUBMISSION_TRIGGER,
      assigneeType: task?.assigneeType || DEFAULT_VALUES.ASSIGNEE_TYPE,
      assignee: task?.assignee || "",
      assigneeId: task?.assigneeId || "",
      objectType: task?.objectType || "",
      objectCategory: task?.objectCategory || "",
      recordId: task?.recordId || "",
      recordName: task?.recordName || "",
      notifyOn: task?.notifyOn ? new Date(task.notifyOn) : undefined,
      dueDate: task?.dueDate ? new Date(task.dueDate) : undefined,
      estimatedStartDate: task?.estimatedStartDate ? new Date(task.estimatedStartDate) : undefined,
      notes: task?.notes || "",
      taskGroup: task?.taskGroup || "",
    })

const [errors, setErrors] = useState<TaskFormErrors>({})
    const [users, setUsers] = useState<User[]>([])
    const [userGroups, setUserGroups] = useState<UserGroup[]>([])
    const [workItems, setWorkItems] = useState<WorkItem[]>([])
    const [filteredAssignees, setFilteredAssignees] = useState<(User | UserGroup)[]>([])
    const [assigneeSearchTerm, setAssigneeSearchTerm] = useState("")
    const [searchResults, setSearchResults] = useState<(User | UserGroup)[]>([])
    const [attachments, setAttachments] = useState<TaskAttachment[]>(task?.attachments || [])
    const [isUploading, setIsUploading] = useState(false)
    const [uploadProgress, setUploadProgress] = useState(0)
    const [startNow, setStartNow] = useState(false) // Default to false (OFF)
    const [workItemTriggerOptions, setWorkItemTriggerOptions] = useState<string[]>([])
    const [selectedWorkItemTrigger, setSelectedWorkItemTrigger] = useState("")
    const [objectSearchTerm, setObjectSearchTerm] = useState("")
    const [recordSearchTerm, setRecordSearchTerm] = useState("")
    const [objectSearchResults, setObjectSearchResults] = useState<string[]>([])
    const [recordSearchResults, setRecordSearchResults] = useState<WorkItem[]>([])
    const [mockObjects] = useState([
      "Contract",
      "Quote",
      "Order",
      "Invoice",
      "Purchase Order",
      "Service Agreement",
      "Proposal",
    ])
    const [mockRecords] = useState<WorkItem[]>([
      { id: "contract-1", name: "Enterprise Contract #2024-001", type: "Contract", category: "Legal" },
      { id: "contract-2", name: "Service Agreement #SA-2024-15", type: "Contract", category: "Legal" },
      { id: "contract-3", name: "Master Service Agreement", type: "Contract", category: "Legal" },
      { id: "quote-1", name: "Q4 Pricing Quote #Q2024-789", type: "Quote", category: "Sales" },
      { id: "quote-2", name: "Enterprise Software Quote", type: "Quote", category: "Sales" },
      { id: "order-1", name: "Order #ORD-2024-456", type: "Order", category: "Fulfillment" },
      { id: "order-2", name: "Bulk Equipment Order", type: "Order", category: "Fulfillment" },
      { id: "invoice-1", name: "Invoice #INV-2024-123", type: "Invoice", category: "Finance" },
      { id: "po-1", name: "Purchase Order #PO-2024-890", type: "Purchase Order", category: "Procurement" },
    ])

const titleCount = getCharacterCount(formData.title, CHARACTER_LIMITS.TITLE)
    const notesCount = getCharacterCount(formData.notes, CHARACTER_LIMITS.NOTES)
    const taskGroupCount = getCharacterCount(formData.taskGroup, CHARACTER_LIMITS.TASK_GROUP)

const availableFields = FIELD_AVAILABILITY[formData.taskType] || []
    const showNotifyOn = availableFields.includes("notifyOn")
    const showDueDate = availableFields.includes("dueDate")
    const showEstimatedStartDate = availableFields.includes("estimatedStartDate")

const hasWorkItemSelected = formData.objectType.trim() !== "" || formData.recordName.trim() !== ""
    const isToggleDisabled = !hasWorkItemSelected

const formatDateForDisplay = (date: Date | undefined) => {
      if (!date) return ""
      return format(date, "PPP 'at' p")
    }

const formatDateForInput = (date: Date | undefined) => {
      if (!date) return ""
      return date.toISOString().slice(0, 16)
    }

const parseDateFromInput = (value: string) => {
      return value ? new Date(value) : undefined
    }

useEffect(() => {
      setUsers([
        { id: "user-1", name: "John Smith", email: "john@example.com", isActive: true },
        { id: "user-2", name: "Sarah Johnson", email: "sarah@example.com", isActive: true },
        { id: "user-3", name: "Mike Davis", email: "mike@example.com", isActive: true },
      ])

setUserGroups([
        { id: "group-1", name: "Compliance Team", members: [], isActive: true },
        { id: "group-2", name: "Sales Team", members: [], isActive: true },
        { id: "group-3", name: "Legal Team", members: [], isActive: true },
      ])

setWorkItems([
        { id: "contract-1", name: "Enterprise Contract #2024-001", type: "Contract", category: "Legal" },
        { id: "quote-1", name: "Q4 Pricing Quote", type: "Quote", category: "Sales" },
        { id: "order-1", name: "Order #ORD-2024-456", type: "Order", category: "Fulfillment" },
      ])
    }, [])

useEffect(() => {
      if (formData.assigneeType === "User") {
        setFilteredAssignees(users)
      } else {
        setFilteredAssignees(userGroups)
      }
    }, [formData.assigneeType, users, userGroups])

useEffect(() => {
      if (!assigneeSearchTerm.trim()) {
        setSearchResults([])
        return
      }

const searchTerm = assigneeSearchTerm.toLowerCase()
      const results = filteredAssignees.filter((assignee) => assignee.name.toLowerCase().includes(searchTerm))
      setSearchResults(results)
    }, [assigneeSearchTerm, filteredAssignees])

useEffect(() => {
      if (!objectSearchTerm.trim()) {
        setObjectSearchResults([])
        return
      }

const searchTerm = objectSearchTerm.toLowerCase()
      const results = mockObjects.filter((obj) => obj.toLowerCase().includes(searchTerm))
      setObjectSearchResults(results)
    }, [objectSearchTerm, mockObjects])

useEffect(() => {
      if (!recordSearchTerm.trim()) {
        setRecordSearchResults([])
        return
      }

const searchTerm = recordSearchTerm.toLowerCase()
      let filteredRecords = mockRecords

if (formData.objectType.trim()) {
        filteredRecords = mockRecords.filter(
          (record) => record.type.toLowerCase() === formData.objectType.toLowerCase(),
        )
      }

const results = filteredRecords.filter((record) => record.name.toLowerCase().includes(searchTerm))
      setRecordSearchResults(results)
    }, [recordSearchTerm, formData.objectType, mockRecords])

useEffect(() => {
      if (showDueDate && !formData.dueDate) {
        setFormData((prev) => ({ ...prev, dueDate: getDefaultDueDate() }))
      }
      if (showNotifyOn && !formData.notifyOn) {
        setFormData((prev) => ({ ...prev, notifyOn: getDefaultNotifyDate() }))
      }
    }, [formData.taskType, showDueDate, showNotifyOn])

useEffect(() => {
      if (formData.objectType.toLowerCase().includes("contract")) {
        setWorkItemTriggerOptions([
          "Contract Activation",
          "Contract Submission",
          "Contract Approval",
          "Contract Expiry",
        ])
      } else if (formData.objectType.toLowerCase().includes("quote")) {
        setWorkItemTriggerOptions(["Quote Approval", "Quote Acceptance", "Quote Expiry"])
      } else if (formData.objectType.toLowerCase().includes("order")) {
        setWorkItemTriggerOptions(["Order Confirmation", "Order Fulfillment", "Order Delivery"])
      } else if (formData.objectType.trim() !== "") {
        setWorkItemTriggerOptions(["Object Creation", "Object Update", "Object Approval"])
      } else {
        setWorkItemTriggerOptions([])
        setSelectedWorkItemTrigger("")
      }
    }, [formData.objectType])

useEffect(() => {
      if (!hasWorkItemSelected) {
        setStartNow(false) // Reset to false when no work item selected
        setSelectedWorkItemTrigger("")
      }
    }, [formData.objectType, formData.recordName])

const validateForm = (): boolean => {
      const newErrors: TaskFormErrors = {}

if (!formData.title.trim()) {
        newErrors.title = "Title is required"
      } else if (formData.title.length > CHARACTER_LIMITS.TITLE) {
        newErrors.title = `Title must be ${CHARACTER_LIMITS.TITLE} characters or less`
      }

if (!formData.assignee.trim()) {
        newErrors.assignee = "Assignee is required"
      }

if (formData.submissionTrigger !== "Manual" && !formData.assignee.trim()) {
        newErrors.assignee = "Assignee is required when submission trigger is not Manual"
      }

if (formData.dueDate && !isValidFutureDate(formData.dueDate)) {
        newErrors.dueDate = "Due date cannot be in the past"
      }

if (formData.notifyOn && !isValidFutureDate(formData.notifyOn)) {
        newErrors.notifyOn = "Notify date cannot be in the past"
      }

if (formData.estimatedStartDate && formData.dueDate && formData.estimatedStartDate > formData.dueDate) {
        newErrors.estimatedStartDate = "Estimated start date cannot be later than due date"
      }

if (formData.notes && formData.notes.length > CHARACTER_LIMITS.NOTES) {
        newErrors.notes = `Notes must be ${CHARACTER_LIMITS.NOTES} characters or less`
      }

if (formData.taskGroup && formData.taskGroup.length > CHARACTER_LIMITS.TASK_GROUP) {
        newErrors.taskGroup = `Task group must be ${CHARACTER_LIMITS.TASK_GROUP} characters or less`
      }

setErrors(newErrors)
      return Object.keys(newErrors).length === 0
    }

const handleSubmit = async (e: React.FormEvent) => {
      e.preventDefault()

if (!validateForm()) {
        return
      }

try {
        await onSubmit(formData)
      } catch (error) {
        setErrors({ general: "Failed to save task. Please try again." })
      }
    }

const handleFieldChange = (field: keyof TaskFormData, value: any) => {
      setFormData((prev) => ({ ...prev, [field]: value }))
      if (errors[field as keyof TaskFormErrors]) {
        setErrors((prev) => ({ ...prev, [field]: undefined }))
      }
    }

const handleAssigneeSearch = (searchTerm: string) => {
      setAssigneeSearchTerm(searchTerm)

const exactMatch = filteredAssignees.find((assignee) => assignee.name.toLowerCase() === searchTerm.toLowerCase())

if (exactMatch) {
        handleFieldChange("assigneeId", exactMatch.id)
        handleFieldChange("assignee", exactMatch.name)
      } else {
        handleFieldChange("assigneeId", "")
        handleFieldChange("assignee", searchTerm)
      }
    }

const handleObjectSearch = (searchTerm: string) => {
      setObjectSearchTerm(searchTerm)

const exactMatch = mockObjects.find((obj) => obj.toLowerCase() === searchTerm.toLowerCase())

if (exactMatch) {
        handleFieldChange("objectType", exactMatch)
        handleFieldChange("recordName", "")
        handleFieldChange("recordId", "")
        setRecordSearchTerm("")
      } else {
        handleFieldChange("objectType", searchTerm)
      }
    }

const handleRecordSearch = (searchTerm: string) => {
      setRecordSearchTerm(searchTerm)

const exactMatch = recordSearchResults.find((record) => record.name.toLowerCase() === searchTerm.toLowerCase())

if (exactMatch) {
        handleFieldChange("recordName", exactMatch.name)
        handleFieldChange("recordId", exactMatch.id)
      } else {
        handleFieldChange("recordName", searchTerm)
        handleFieldChange("recordId", "")
      }
    }

const handleFileUpload = async (files: FileList) => {
      setIsUploading(true)
      setUploadProgress(0)

try {
        const uploadPromises = Array.from(files).map(async (file, index) => {
          await new Promise((resolve) => setTimeout(resolve, 1000 + index * 500))

const newAttachment: TaskAttachment = {
            id: `attachment-${Date.now()}-${index}`,
            fileName: file.name,
            fileSize: file.size,
            fileType: file.type,
            uploadedBy: "Current User",
            uploadedOn: new Date(),
            url: URL.createObjectURL(file),
          }

setUploadProgress((prev) => Math.min(prev + 100 / files.length, 100))
          return newAttachment
        })

const newAttachments = await Promise.all(uploadPromises)
        setAttachments((prev) => [...prev, ...newAttachments])
      } catch (error) {
        console.error("Upload failed:", error)
        setErrors((prev) => ({ ...prev, general: "Failed to upload files. Please try again." }))
      } finally {
        setIsUploading(false)
        setUploadProgress(0)
      }
    }

const handleFileDelete = async (attachmentId: string) => {
      try {
        setAttachments((prev) => prev.filter((attachment) => attachment.id !== attachmentId))
      } catch (error) {
        console.error("Delete failed:", error)
        setErrors((prev) => ({ ...prev, general: "Failed to delete file. Please try again." }))
      }
    }

const handleFileDownload = (attachment: TaskAttachment) => {
      const link = document.createElement("a")
      link.href = attachment.url
      link.download = attachment.fileName
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }

return (
      <form ref={ref} onSubmit={handleSubmit} className={className}>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
          <div className="space-y-6 w-full">
            {errors.general && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{errors.general}</AlertDescription>
              </Alert>
            )}

<Card>
              <CardHeader className="pb-4">
                <CardTitle className="text-xl font-semibold text-gray-700 mb-0 leading-tight">
                  Basic Information
                </CardTitle>
                <CardDescription className="text-gray-500 mt-0 -mb-1">
                  Core details and properties of this task
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-3">
                  <Label htmlFor="title" className="text-gray-700 font-semibold">
                    <span className="text-red-500">*</span> Title
                  </Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => handleFieldChange("title", e.target.value)}
                    placeholder="Enter task title..."
                    className={`w-full border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${errors.title ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                  />
                  {errors.title && <span className="text-sm text-destructive">{errors.title}</span>}
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-3">
                    <Label htmlFor="priority" className="text-gray-700 font-semibold">
                      Priority
                    </Label>
                    <Select value={formData.priority} onValueChange={(value) => handleFieldChange("priority", value)}>
                      <SelectTrigger className="w-full border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {TASK_PRIORITIES.map((priority) => (
                          <SelectItem key={priority.value} value={priority.value}>
                            {priority.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-3">
                    <Label htmlFor="taskType" className="text-gray-700 font-semibold">
                      Task Type
                    </Label>
                    <Select
                      value={formData.taskType}
                      onValueChange={(value) => handleFieldChange("taskType", value as TaskType)}
                    >
                      <SelectTrigger className="w-full border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {TASK_TYPES.map((type) => (
                          <SelectItem key={type.value} value={type.value}>
                            {type.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-3">
                  <Label htmlFor="taskGroup" className="text-gray-700 font-semibold">
                    Task Group
                  </Label>
                  <Input
                    id="taskGroup"
                    value={formData.taskGroup}
                    onChange={(e) => handleFieldChange("taskGroup", e.target.value)}
                    placeholder="Optional task group for organization..."
                    className={`w-full border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${errors.taskGroup ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                  />
                  {errors.taskGroup && <span className="text-sm text-destructive">{errors.taskGroup}</span>}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-4">
                <CardTitle className="text-xl font-semibold text-gray-700 mb-0 leading-tight">
                  Work Item Integration
                </CardTitle>
                <CardDescription className="text-gray-500 mt-0 -mb-1">
                  Link this task to contracts, quotes, or orders
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-3">
                  <Label htmlFor="objectName" className="text-gray-700 font-semibold">
                    Object Name
                  </Label>
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                    <Input
                      id="objectName"
                      value={objectSearchTerm || formData.objectType}
                      onChange={(e) => handleObjectSearch(e.target.value)}
                      placeholder="Search for object (Contract, Quote, Order...)"
                      className="w-full pl-10 border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors"
                    />

{objectSearchTerm && objectSearchResults.length > 0 && (
                      <div className="absolute z-10 w-full mt-1 bg-white border-2 border-gray-200 rounded-md shadow-lg max-h-48 overflow-y-auto">
                        {objectSearchResults.map((obj) => (
                          <div
                            key={obj}
                            className="px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0"
                            onClick={() => {
                              handleFieldChange("objectType", obj)
                              setObjectSearchTerm("")
                              handleFieldChange("recordName", "")
                              handleFieldChange("recordId", "")
                              setRecordSearchTerm("")
                            }}
                          >
                            <div className="font-medium text-gray-900">{obj}</div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>

<div className="space-y-3">
                  <Label htmlFor="recordName" className="text-gray-700 font-semibold">
                    Record Name
                  </Label>
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                    <Input
                      id="recordName"
                      value={recordSearchTerm || formData.recordName}
                      onChange={(e) => handleRecordSearch(e.target.value)}
                      placeholder="Search for specific record"
                      className="w-full pl-10 border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors"
                    />

{recordSearchTerm && recordSearchResults.length > 0 && (
                      <div className="absolute z-10 w-full mt-1 bg-white border-2 border-gray-200 rounded-md shadow-lg max-h-48 overflow-y-auto">
                        {recordSearchResults.map((record) => (
                          <div
                            key={record.id}
                            className="px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0"
                            onClick={() => {
                              handleFieldChange("recordName", record.name)
                              handleFieldChange("recordId", record.id)
                              setRecordSearchTerm("")
                            }}
                          >
                            <div className="font-medium text-gray-900">{record.name}</div>
                            <div className="text-sm text-gray-500">
                              {record.type} • {record.category}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-4">
                <CardTitle className="text-xl font-semibold text-gray-700 mb-0 leading-tight">Assignment</CardTitle>
                <CardDescription className="text-gray-500 mt-0 -mb-1">
                  Task assignment and submission settings
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="space-y-3">
                    <Label htmlFor="assigneeType" className="text-gray-700 font-semibold">
                      Assignee Type
                    </Label>
                    <Select
                      value={formData.assigneeType}
                      onValueChange={(value) => {
                        handleFieldChange("assigneeType", value)
                        setAssigneeSearchTerm("")
                        handleFieldChange("assigneeId", "")
                        handleFieldChange("assignee", "")
                      }}
                    >
                      <SelectTrigger className="w-full border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {ASSIGNEE_TYPES.map((type) => (
                          <SelectItem key={type.value} value={type.value}>
                            {type.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-3 md:col-span-2">
                    <Label htmlFor="assignee" className="text-gray-700 font-semibold">
                      <span className="text-red-500">*</span> Assignee
                    </Label>
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                      <Input
                        id="assignee"
                        value={assigneeSearchTerm || formData.assignee}
                        onChange={(e) => handleAssigneeSearch(e.target.value)}
                        placeholder={formData.assigneeType === "User" ? "Add user" : "Add group"}
                        className={`w-full pl-10 border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${errors.assignee ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                      />

{assigneeSearchTerm && searchResults.length > 0 && (
                        <div className="absolute z-10 w-full mt-1 bg-white border-2 border-gray-200 rounded-md shadow-lg max-h-48 overflow-y-auto">
                          {searchResults.map((assignee) => (
                            <div
                              key={assignee.id}
                              className="px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0"
                              onClick={() => {
                                handleFieldChange("assigneeId", assignee.id)
                                handleFieldChange("assignee", assignee.name)
                                setAssigneeSearchTerm("")
                              }}
                            >
                              <div className="font-medium text-gray-900">{assignee.name}</div>
                              {"email" in assignee && <div className="text-sm text-gray-500">{assignee.email}</div>}
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                    {errors.assignee && <span className="text-sm text-destructive">{errors.assignee}</span>}
                  </div>
                </div>

<div className="space-y-3">
                  <div className="flex items-center space-x-3">
                    <Switch
                      id="startNow"
                      checked={startNow}
                      onCheckedChange={setStartNow}
                      disabled={isToggleDisabled}
                      className="data-[state=checked]:bg-blue-600 disabled:opacity-50"
                    />
                    <div className="flex items-center space-x-2">
                      <Label
                        htmlFor="startNow"
                        className={`text-gray-800 font-medium cursor-pointer ${isToggleDisabled ? "text-gray-500" : ""}`}
                      >
                        Delay Assignment
                      </Label>
                    </div>
                  </div>

{!startNow && (
                    <div className="text-sm text-gray-600 bg-amber-50 p-3 rounded-md border border-amber-300">
                      Link a work item to delay assignment
                    </div>
                  )}

{hasWorkItemSelected &&
                    startNow && ( // Show trigger options when toggle is ON (startNow is true)
                      <div className="mt-4 space-y-3">
                        <Label className="text-gray-700 font-semibold">Assign Task When</Label>
                        <Select value={selectedWorkItemTrigger} onValueChange={setSelectedWorkItemTrigger}>
                          <SelectTrigger className="w-full border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors">
                            <SelectValue placeholder="Select when to start this task..." />
                          </SelectTrigger>
                          <SelectContent>
                            {workItemTriggerOptions.map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    )}
                </div>
              </CardContent>
            </Card>
          </div>

<div className="space-y-6 w-full">
            <Card>
              <CardHeader className="pb-4">
                <CardTitle className="text-xl font-semibold text-gray-700 mb-0 leading-tight">
                  Dates & Scheduling
                </CardTitle>
                <CardDescription className="text-gray-500 mt-0 -mb-1">
                  Timeline and important dates for task completion
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {showNotifyOn && !showDueDate && !showEstimatedStartDate && (
                  <div className="space-y-3">
                    <Label htmlFor="notifyOn" className="text-gray-700 font-semibold">
                      Notify On
                    </Label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          className={`w-full justify-start text-left font-normal border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${
                            !formData.notifyOn ? "text-muted-foreground" : ""
                          } ${errors.notifyOn ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                        >
                          <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                          <span className="truncate">
                            {formData.notifyOn ? formatDateForDisplay(formData.notifyOn) : "Select date and time"}
                          </span>
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <div className="p-3 space-y-3">
                          <Calendar
                            mode="single"
                            selected={formData.notifyOn}
                            onSelect={(date) => {
                              if (date) {
                                const currentTime = formData.notifyOn || new Date()
                                date.setHours(currentTime.getHours(), currentTime.getMinutes())
                                handleFieldChange("notifyOn", date)
                              }
                            }}
                            disabled={(date) => date < new Date()}
                            initialFocus
                          />
                          <div className="border-t pt-3">
                            <Label className="text-sm font-medium">Time</Label>
                            <Input
                              type="time"
                              value={formData.notifyOn ? format(formData.notifyOn, "HH:mm") : ""}
                              onChange={(e) => {
                                if (formData.notifyOn && e.target.value) {
                                  const [hours, minutes] = e.target.value.split(":")
                                  const newDate = new Date(formData.notifyOn)
                                  newDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
                                  handleFieldChange("notifyOn", newDate)
                                }
                              }}
                              className="mt-1"
                            />
                          </div>
                        </div>
                      </PopoverContent>
                    </Popover>
                    {errors.notifyOn && <span className="text-sm text-destructive">{errors.notifyOn}</span>}
                  </div>
                )}

{((showDueDate && showEstimatedStartDate) ||
                  (showNotifyOn && (showDueDate || showEstimatedStartDate))) && (
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {showNotifyOn && (
                      <div className="space-y-3">
                        <Label htmlFor="notifyOn" className="text-gray-700 font-semibold">
                          Notify On
                        </Label>
                        <Popover>
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              className={`w-full justify-start text-left font-normal border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${
                                !formData.notifyOn ? "text-muted-foreground" : ""
                              } ${errors.notifyOn ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                            >
                              <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                              <span className="truncate">
                                {formData.notifyOn ? formatDateForDisplay(formData.notifyOn) : "Select date and time"}
                              </span>
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            <div className="p-3 space-y-3">
                              <Calendar
                                mode="single"
                                selected={formData.notifyOn}
                                onSelect={(date) => {
                                  if (date) {
                                    const currentTime = formData.notifyOn || new Date()
                                    date.setHours(currentTime.getHours(), currentTime.getMinutes())
                                    handleFieldChange("notifyOn", date)
                                  }
                                }}
                                disabled={(date) => date < new Date()}
                                initialFocus
                              />
                              <div className="border-t pt-3">
                                <Label className="text-sm font-medium">Time</Label>
                                <Input
                                  type="time"
                                  value={formData.notifyOn ? format(formData.notifyOn, "HH:mm") : ""}
                                  onChange={(e) => {
                                    if (formData.notifyOn && e.target.value) {
                                      const [hours, minutes] = e.target.value.split(":")
                                      const newDate = new Date(formData.notifyOn)
                                      newDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
                                      handleFieldChange("notifyOn", newDate)
                                    }
                                  }}
                                  className="mt-1"
                                />
                              </div>
                            </div>
                          </PopoverContent>
                        </Popover>
                        {errors.notifyOn && <span className="text-sm text-destructive">{errors.notifyOn}</span>}
                      </div>
                    )}

{showDueDate && (
                      <div className="space-y-3">
                        <Label htmlFor="dueDate" className="text-gray-700 font-semibold">
                          Due Date
                        </Label>
                        <Popover>
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              className={`w-full justify-start text-left font-normal border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${
                                !formData.dueDate ? "text-muted-foreground" : ""
                              } ${errors.dueDate ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                            >
                              <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                              <span className="truncate">
                                {formData.dueDate ? formatDateForDisplay(formData.dueDate) : "Select date and time"}
                              </span>
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            <div className="p-3 space-y-3">
                              <Calendar
                                mode="single"
                                selected={formData.dueDate}
                                onSelect={(date) => {
                                  if (date) {
                                    const currentTime = formData.dueDate || new Date()
                                    date.setHours(currentTime.getHours(), currentTime.getMinutes())
                                    handleFieldChange("dueDate", date)
                                  }
                                }}
                                disabled={(date) => date < new Date()}
                                initialFocus
                              />
                              <div className="border-t pt-3">
                                <Label className="text-sm font-medium">Time</Label>
                                <Input
                                  type="time"
                                  value={formData.dueDate ? format(formData.dueDate, "HH:mm") : ""}
                                  onChange={(e) => {
                                    if (formData.dueDate && e.target.value) {
                                      const [hours, minutes] = e.target.value.split(":")
                                      const newDate = new Date(formData.dueDate)
                                      newDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
                                      handleFieldChange("dueDate", newDate)
                                    }
                                  }}
                                  className="mt-1"
                                />
                              </div>
                            </div>
                          </PopoverContent>
                        </Popover>
                        {errors.dueDate && <span className="text-sm text-destructive">{errors.dueDate}</span>}
                      </div>
                    )}

{showEstimatedStartDate && (
                      <div className="space-y-3">
                        <Label htmlFor="estimatedStartDate" className="text-gray-700 font-semibold">
                          Estimated Start Date
                        </Label>
                        <Popover>
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              className={`w-full justify-start text-left font-normal border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${
                                !formData.estimatedStartDate ? "text-muted-foreground" : ""
                              } ${errors.estimatedStartDate ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                            >
                              <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                              <span className="truncate">
                                {formData.estimatedStartDate
                                  ? formatDateForDisplay(formData.estimatedStartDate)
                                  : "Select date and time"}
                              </span>
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            <div className="p-3 space-y-3">
                              <Calendar
                                mode="single"
                                selected={formData.estimatedStartDate}
                                onSelect={(date) => {
                                  if (date) {
                                    const currentTime = formData.estimatedStartDate || new Date()
                                    date.setHours(currentTime.getHours(), currentTime.getMinutes())
                                    handleFieldChange("estimatedStartDate", date)
                                  }
                                }}
                                disabled={(date) => date < new Date()}
                                initialFocus
                              />
                              <div className="border-t pt-3">
                                <Label className="text-sm font-medium">Time</Label>
                                <Input
                                  type="time"
                                  value={
                                    formData.estimatedStartDate ? format(formData.estimatedStartDate, "HH:mm") : ""
                                  }
                                  onChange={(e) => {
                                    if (formData.estimatedStartDate && e.target.value) {
                                      const [hours, minutes] = e.target.value.split(":")
                                      const newDate = new Date(formData.estimatedStartDate)
                                      newDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
                                      handleFieldChange("estimatedStartDate", newDate)
                                    }
                                  }}
                                  className="mt-1"
                                />
                              </div>
                            </div>
                          </PopoverContent>
                        </Popover>
                        {errors.estimatedStartDate && (
                          <span className="text-sm text-destructive">{errors.estimatedStartDate}</span>
                        )}
                      </div>
                    )}
                  </div>
                )}

{showDueDate && !showEstimatedStartDate && !showNotifyOn && (
                  <div className="space-y-3">
                    <Label htmlFor="dueDate" className="text-gray-700 font-semibold">
                      Due Date
                    </Label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          className={`w-full justify-start text-left font-normal border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${
                            !formData.dueDate ? "text-muted-foreground" : ""
                          } ${errors.dueDate ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                        >
                          <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                          <span className="truncate">
                            {formData.dueDate ? formatDateForDisplay(formData.dueDate) : "Select date and time"}
                          </span>
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <div className="p-3 space-y-3">
                          <Calendar
                            mode="single"
                            selected={formData.dueDate}
                            onSelect={(date) => {
                              if (date) {
                                const currentTime = formData.dueDate || new Date()
                                date.setHours(currentTime.getHours(), currentTime.getMinutes())
                                handleFieldChange("dueDate", date)
                              }
                            }}
                            disabled={(date) => date < new Date()}
                            initialFocus
                          />
                          <div className="border-t pt-3">
                            <Label className="text-sm font-medium">Time</Label>
                            <Input
                              type="time"
                              value={formData.dueDate ? format(formData.dueDate, "HH:mm") : ""}
                              onChange={(e) => {
                                if (formData.dueDate && e.target.value) {
                                  const [hours, minutes] = e.target.value.split(":")
                                  const newDate = new Date(formData.dueDate)
                                  newDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
                                  handleFieldChange("dueDate", newDate)
                                }
                              }}
                              className="mt-1"
                            />
                          </div>
                        </div>
                      </PopoverContent>
                    </Popover>
                    {errors.dueDate && <span className="text-sm text-destructive">{errors.dueDate}</span>}
                  </div>
                )}

{showEstimatedStartDate && !showDueDate && !showNotifyOn && (
                  <div className="space-y-3">
                    <Label htmlFor="estimatedStartDate" className="text-gray-700 font-semibold">
                      Estimated Start Date
                    </Label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          className={`w-full justify-start text-left font-normal border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${
                            !formData.estimatedStartDate ? "text-muted-foreground" : ""
                          } ${errors.estimatedStartDate ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                        >
                          <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                          <span className="truncate">
                            {formData.estimatedStartDate
                              ? formatDateForDisplay(formData.estimatedStartDate)
                              : "Select date and time"}
                          </span>
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <div className="p-3 space-y-3">
                          <Calendar
                            mode="single"
                            selected={formData.estimatedStartDate}
                            onSelect={(date) => {
                              if (date) {
                                const currentTime = formData.estimatedStartDate || new Date()
                                date.setHours(currentTime.getHours(), currentTime.getMinutes())
                                handleFieldChange("estimatedStartDate", date)
                              }
                            }}
                            disabled={(date) => date < new Date()}
                            initialFocus
                          />
                          <div className="border-t pt-3">
                            <Label className="text-sm font-medium">Time</Label>
                            <Input
                              type="time"
                              value={formData.estimatedStartDate ? format(formData.estimatedStartDate, "HH:mm") : ""}
                              onChange={(e) => {
                                if (formData.estimatedStartDate && e.target.value) {
                                  const [hours, minutes] = e.target.value.split(":")
                                  const newDate = new Date(formData.estimatedStartDate)
                                  newDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
                                  handleFieldChange("estimatedStartDate", newDate)
                                }
                              }}
                              className="mt-1"
                            />
                          </div>
                        </div>
                      </PopoverContent>
                    </Popover>
                    {errors.estimatedStartDate && (
                      <span className="text-sm text-destructive">{errors.estimatedStartDate}</span>
                    )}
                  </div>
                )}
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-4">
                <CardTitle className="text-xl font-semibold text-gray-700 mb-0 leading-tight">
                  Additional Information
                </CardTitle>
                <CardDescription className="text-gray-500 mt-0 -mb-1">
                  Additional context and special instructions
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <Label htmlFor="notes" className="text-gray-700 font-semibold">
                    Notes
                  </Label>
                  <Textarea
                    id="notes"
                    value={formData.notes}
                    onChange={(e) => handleFieldChange("notes", e.target.value)}
                    placeholder="Add any additional context or instructions..."
                    className={`w-full min-h-[100px] resize-none border-2 border-gray-300 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 focus-visible:ring-[3px] focus:border-blue-500 focus:ring-blue-500/50 focus:ring-[3px] transition-colors ${errors.notes ? "border-destructive focus-visible:border-destructive focus:border-destructive" : ""}`}
                  />
                  <div className="flex justify-between text-sm">
                    {errors.notes && <span className="text-destructive">{errors.notes}</span>}
                    <span
                      className={`ml-auto ${notesCount.isOverLimit ? "text-destructive" : "text-muted-foreground"}`}
                    >
                      {notesCount.count}/{CHARACTER_LIMITS.NOTES}
                    </span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-4">
                <CardTitle className="text-xl font-semibold text-gray-700 mb-0 leading-tight">Attachments</CardTitle>
                <CardDescription className="text-gray-500 mt-0 -mb-1">
                  Upload files and documents related to this task
                </CardDescription>
              </CardHeader>
              <CardContent>
                <TaskAttachments
                  attachments={attachments}
                  onUpload={handleFileUpload}
                  onDelete={handleFileDelete}
                  onDownload={handleFileDownload}
                  isUploading={isUploading}
                  uploadProgress={uploadProgress}
                />
              </CardContent>
            </Card>
          </div>
        </div>
      </form>
    )
  },
)

TaskForm.displayName = "TaskForm"

export default TaskForm
[V0_FILE]typescriptreact:file="src/components/status-update-dialog.tsx"
"use client"

import { useState } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import type { Task, TaskStatus } from "../interfaces/Task"
import { getValidStatusTransitions, requiresReasonForStatusChange } from "../utils/task-helpers"
import { AlertCircle, CheckCircle, Clock, Circle, XCircle } from "lucide-react"

interface StatusUpdateDialogProps {
  task: Task
  open: boolean
  onOpenChange: (open: boolean) => void
  onStatusUpdate: (status: TaskStatus, reason?: string) => Promise<void>
}

export default function StatusUpdateDialog({ task, open, onOpenChange, onStatusUpdate }: StatusUpdateDialogProps) {
  const [selectedStatus, setSelectedStatus] = useState<TaskStatus | "">("")
  const [reason, setReason] = useState("")
  const [isUpdating, setIsUpdating] = useState(false)

const validTransitions = getValidStatusTransitions(task.status, task.taskType)
  const requiresReason = selectedStatus
    ? requiresReasonForStatusChange(task.status, selectedStatus as TaskStatus)
    : false

const getStatusIcon = (status: TaskStatus) => {
    switch (status) {
      case "Completed":
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case "In Progress":
        return <Clock className="h-4 w-4 text-blue-600" />
      case "Not Started":
        return <Circle className="h-4 w-4 text-gray-600" />
      case "Cancelled":
        return <XCircle className="h-4 w-4 text-red-600" />
      case "In Review":
        return <AlertCircle className="h-4 w-4 text-orange-600" />
      default:
        return <Circle className="h-4 w-4 text-gray-600" />
    }
  }

const getStatusColor = (status: TaskStatus) => {
    switch (status) {
      case "Completed":
        return "bg-green-100 text-green-800"
      case "In Progress":
        return "bg-blue-100 text-blue-800"
      case "Not Started":
        return "bg-gray-100 text-gray-800"
      case "Cancelled":
        return "bg-red-100 text-red-800"
      case "In Review":
        return "bg-orange-100 text-orange-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleSubmit = async () => {
    if (!selectedStatus) return

setIsUpdating(true)
    try {
      await onStatusUpdate(selectedStatus as TaskStatus, reason || undefined)
      onOpenChange(false)
      setSelectedStatus("")
      setReason("")
    } catch (error) {
      console.error("Failed to update status:", error)
    } finally {
      setIsUpdating(false)
    }
  }

const canSubmit = selectedStatus && (!requiresReason || reason.trim())

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Update Task Status</DialogTitle>
          <DialogDescription>
            Change the status of "{task.title}" from{" "}
            <Badge className={getStatusColor(task.status)}>{task.status}</Badge>
          </DialogDescription>
        </DialogHeader>

<div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="status">New Status</Label>
            <Select value={selectedStatus} onValueChange={setSelectedStatus}>
              <SelectTrigger>
                <SelectValue placeholder="Select new status" />
              </SelectTrigger>
              <SelectContent>
                {validTransitions.map((status) => (
                  <SelectItem key={status} value={status}>
                    <div className="flex items-center gap-2">
                      {getStatusIcon(status)}
                      {status}
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{(requiresReason || selectedStatus) && (
            <div className="space-y-2">
              <Label htmlFor="reason">{requiresReason ? "Reason (Required)" : "Reason (Optional)"}</Label>
              <Textarea
                id="reason"
                placeholder="Enter reason for status change..."
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                className="min-h-[80px] resize-none"
                required={requiresReason}
              />
              {requiresReason && (
                <p className="text-sm text-orange-600 flex items-center gap-1">
                  <AlertCircle className="h-3 w-3" />A reason is required for this status change
                </p>
              )}
            </div>
          )}
        </div>

<DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isUpdating}>
            Cancel
          </Button>
          <Button onClick={handleSubmit} disabled={!canSubmit || isUpdating}>
            {isUpdating ? "Updating..." : "Update Status"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="src/interfaces/Task.ts"
export type TaskType = "Informational" | "Actionable" | "Verifiable"

export type TaskPriority = "High" | "Normal" | "Low"

export type SubmissionTrigger = "Manual" | "Activation"

export type AssigneeType = "User" | "User Group"

export interface Task {
  id: string
  title: string
  priority: TaskPriority
  taskType: TaskType
  status: TaskStatus
  submissionTrigger: SubmissionTrigger
  assigneeType: AssigneeType
  assignee: string
  assigneeId: string

source?: "Platform" | "App Integration" | "External Integration" | "Manual"
  sourceApp?: string // Name of the app/integration that created the task
  sourceIcon?: string // Icon URL for the source app

// Optional fields
  objectType?: string
  objectCategory?: string
  recordId?: string
  recordName?: string

// Date fields (availability depends on task type)
  notifyOn?: Date
  dueDate?: Date
  estimatedStartDate?: Date
  actualStartDate?: Date
  dateOfCompletion?: Date

// Content fields
  notes?: string
  taskGroup?: string

// Metadata
  createdBy: string
  createdOn: Date
  modifiedBy: string
  modifiedOn: Date

// Related data
  attachments?: TaskAttachment[]
  comments?: TaskComment[]
  watchers?: string[] // User IDs watching this task
  mentions?: TaskMention[] // @mentions in task content
}

export interface TaskAttachment {
  id: string
  fileName: string
  fileSize: number
  fileType: string
  uploadedBy: string
  uploadedOn: Date
  url: string
}

export interface TaskComment {
  id: string
  content: string
  createdBy: string
  createdOn: Date
  mentions?: TaskMention[] // @mentions in this comment
}

export interface TaskMention {
  id: string
  userId: string
  userName: string
  position: number // Position in text where mention occurs
  length: number // Length of the mention text
}

export interface TaskActivity {
  id: string
  taskId: string
  action: "created" | "updated" | "status_changed" | "assigned" | "commented" | "mentioned" | "watched"
  description: string
  performedBy: string
  performedOn: Date
  metadata?: Record<string, any>
}

export interface TaskFilters {
  search?: string
  taskType?: TaskType[]
  status?: TaskStatus[]
  priority?: TaskPriority[]
  assignee?: string[]
  dueDateRange?: {
    start?: Date
    end?: Date
  }
  taskGroup?: string[]
  overdue?: boolean
  source?: ("Platform" | "App Integration" | "External Integration" | "Manual")[]
  sourceApp?: string[]
  watchedByMe?: boolean // Filter for tasks user is watching
}

export interface TaskSortOptions {
  field: "title" | "assignee" | "priority" | "dueDate" | "status" | "createdOn"
  direction: "asc" | "desc"
}

export interface TaskFiltersProps {
  filters: TaskFilters
  sortOptions: TaskSortOptions
  onFiltersChange: (filters: TaskFilters) => void
  onSortChange: (sortOptions: TaskSortOptions) => void
  onClearFilters: () => void
  className?: string
}

export interface TaskFormData {
  title: string
  priority: TaskPriority
  taskType: TaskType
  submissionTrigger: SubmissionTrigger
  assigneeType: AssigneeType
  assignee: string
  assigneeId: string
  objectType?: string
  objectCategory?: string
  recordId?: string
  recordName?: string
  notifyOn?: Date
  dueDate?: Date
  estimatedStartDate?: Date
  notes?: string
  taskGroup?: string
}

export interface TaskFormErrors {
  title?: string
  assignee?: string
  dueDate?: string
  estimatedStartDate?: string
  notifyOn?: string
  notes?: string
  taskGroup?: string
  general?: string
}
[V0_FILE]typescriptreact:file="src/components/mention-input.tsx"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Textarea } from "@/components/ui/textarea"
import { Card } from "@/components/ui/card"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { searchUsers } from "../api/users"
import type { User } from "../interfaces/User"
import type { TaskMention } from "../interfaces/Task"

interface MentionInputProps {
  value: string
  onChange: (value: string, mentions: TaskMention[]) => void
  placeholder?: string
  className?: string
  minHeight?: string
}

export default function MentionInput({
  value,
  onChange,
  placeholder = "Type @ to mention someone...",
  className,
  minHeight = "min-h-[80px]",
}: MentionInputProps) {
  const [showSuggestions, setShowSuggestions] = useState(false)
  const [suggestions, setSuggestions] = useState<User[]>([])
  const [selectedIndex, setSelectedIndex] = useState(0)
  const [mentionQuery, setMentionQuery] = useState("")
  const [mentionStart, setMentionStart] = useState(0)
  const [mentions, setMentions] = useState<TaskMention[]>([])

const textareaRef = useRef<HTMLTextAreaElement>(null)
  const suggestionsRef = useRef<HTMLDivElement>(null)

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

const searchForUsers = async (query: string) => {
    if (query.length < 1) {
      setSuggestions([])
      return
    }

try {
      const response = await searchUsers(query)
      if (response.success && response.data) {
        setSuggestions(response.data.slice(0, 5)) // Limit to 5 suggestions
      }
    } catch (error) {
      console.error("Failed to search users:", error)
      setSuggestions([])
    }
  }

const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newValue = e.target.value
    const cursorPosition = e.target.selectionStart

// Check if user typed @
    const textBeforeCursor = newValue.slice(0, cursorPosition)
    const lastAtIndex = textBeforeCursor.lastIndexOf("@")

if (lastAtIndex !== -1) {
      const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1)

// Check if we're in a mention context (no spaces after @)
      if (!textAfterAt.includes(" ") && !textAfterAt.includes("\n")) {
        setMentionStart(lastAtIndex)
        setMentionQuery(textAfterAt)
        setShowSuggestions(true)
        setSelectedIndex(0)
        searchForUsers(textAfterAt)
      } else {
        setShowSuggestions(false)
      }
    } else {
      setShowSuggestions(false)
    }

// Update mentions based on current text
    updateMentions(newValue)
    onChange(newValue, mentions)
  }

const updateMentions = (text: string) => {
    const mentionRegex = /@(\w+(?:\s+\w+)*)/g
    const newMentions: TaskMention[] = []
    let match

while ((match = mentionRegex.exec(text)) !== null) {
      // This is a simplified approach - in a real app, you'd want to track
      // actual user IDs and validate mentions against real users
      newMentions.push({
        id: `mention-${match.index}`,
        userId: `user-${match[1].toLowerCase().replace(/\s+/g, "-")}`,
        userName: match[1],
        position: match.index,
        length: match[0].length,
      })
    }

setMentions(newMentions)
  }

const insertMention = (user: User) => {
    if (!textareaRef.current) return

const textarea = textareaRef.current
    const beforeMention = value.slice(0, mentionStart)
    const afterMention = value.slice(textarea.selectionStart)
    const mentionText = `@${user.name} `

const newValue = beforeMention + mentionText + afterMention
    const newCursorPosition = mentionStart + mentionText.length

// Update mentions
    const newMention: TaskMention = {
      id: `mention-${Date.now()}`,
      userId: user.id,
      userName: user.name,
      position: mentionStart,
      length: mentionText.trim().length,
    }

const updatedMentions = [...mentions, newMention]
    setMentions(updatedMentions)

onChange(newValue, updatedMentions)
    setShowSuggestions(false)

// Set cursor position after mention
    setTimeout(() => {
      textarea.focus()
      textarea.setSelectionRange(newCursorPosition, newCursorPosition)
    }, 0)
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (!showSuggestions || suggestions.length === 0) return

switch (e.key) {
      case "ArrowDown":
        e.preventDefault()
        setSelectedIndex((prev) => (prev + 1) % suggestions.length)
        break
      case "ArrowUp":
        e.preventDefault()
        setSelectedIndex((prev) => (prev - 1 + suggestions.length) % suggestions.length)
        break
      case "Enter":
      case "Tab":
        e.preventDefault()
        if (suggestions[selectedIndex]) {
          insertMention(suggestions[selectedIndex])
        }
        break
      case "Escape":
        setShowSuggestions(false)
        break
    }
  }

const getSuggestionPosition = () => {
    if (!textareaRef.current) return { top: 0, left: 0 }

const textarea = textareaRef.current
    const rect = textarea.getBoundingClientRect()

// This is a simplified positioning - in a real app, you'd want more sophisticated
    // cursor position calculation
    return {
      top: rect.bottom + 4,
      left: rect.left,
    }
  }

return (
    <div className="relative">
      <Textarea
        ref={textareaRef}
        value={value}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        className={`${minHeight} resize-none ${className}`}
      />

{showSuggestions && suggestions.length > 0 && (
        <Card
          ref={suggestionsRef}
          className="absolute z-50 w-64 max-h-48 overflow-y-auto border shadow-lg bg-white"
          style={getSuggestionPosition()}
        >
          <div className="p-2">
            {suggestions.map((user, index) => (
              <div
                key={user.id}
                className={`flex items-center gap-2 p-2 rounded cursor-pointer ${
                  index === selectedIndex ? "bg-blue-50" : "hover:bg-gray-50"
                }`}
                onClick={() => insertMention(user)}
              >
                <Avatar className="h-6 w-6">
                  <AvatarFallback className="text-xs">{getInitials(user.name)}</AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium truncate">{user.name}</div>
                  <div className="text-xs text-gray-500 truncate">{user.email}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="src/components/task-activity-feed.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import type { TaskActivity } from "../interfaces/Task"
import { formatDateTime } from "../utils/date-helpers"
import { Activity, MessageSquare, User, CheckCircle, Clock, AlertCircle, Eye } from "lucide-react"

interface TaskActivityFeedProps {
  taskId: string
  activities: TaskActivity[]
  className?: string
}

export default function TaskActivityFeed({ taskId, activities, className }: TaskActivityFeedProps) {
  const [visibleCount, setVisibleCount] = useState(10)

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

const getActivityIcon = (action: TaskActivity["action"]) => {
    switch (action) {
      case "created":
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case "updated":
        return <AlertCircle className="h-4 w-4 text-blue-600" />
      case "status_changed":
        return <Clock className="h-4 w-4 text-orange-600" />
      case "assigned":
        return <User className="h-4 w-4 text-purple-600" />
      case "commented":
        return <MessageSquare className="h-4 w-4 text-gray-600" />
      case "mentioned":
        return <MessageSquare className="h-4 w-4 text-blue-600" />
      case "watched":
        return <Eye className="h-4 w-4 text-gray-600" />
      default:
        return <Activity className="h-4 w-4 text-gray-600" />
    }
  }

const getActivityColor = (action: TaskActivity["action"]) => {
    switch (action) {
      case "created":
        return "border-green-200 bg-green-50"
      case "updated":
        return "border-blue-200 bg-blue-50"
      case "status_changed":
        return "border-orange-200 bg-orange-50"
      case "assigned":
        return "border-purple-200 bg-purple-50"
      case "commented":
      case "mentioned":
        return "border-gray-200 bg-gray-50"
      case "watched":
        return "border-gray-200 bg-gray-50"
      default:
        return "border-gray-200 bg-gray-50"
    }
  }

const visibleActivities = activities.slice(0, visibleCount)
  const hasMore = activities.length > visibleCount

if (activities.length === 0) {
    return (
      <Card className={className}>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5" />
            Activity
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center py-6 text-muted-foreground">
            <Activity className="h-8 w-8 mx-auto mb-2 opacity-50" />
            <p>No activity yet</p>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Activity className="h-5 w-5" />
          Activity ({activities.length})
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {visibleActivities.map((activity, index) => (
            <div key={activity.id} className="flex gap-3">
              <div
                className={`flex-shrink-0 w-8 h-8 rounded-full border-2 flex items-center justify-center ${getActivityColor(activity.action)}`}
              >
                {getActivityIcon(activity.action)}
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 text-sm">
                  <Avatar className="h-6 w-6">
                    <AvatarFallback className="text-xs">{getInitials(activity.performedBy)}</AvatarFallback>
                  </Avatar>
                  <span className="font-medium">{activity.performedBy}</span>
                  <span className="text-muted-foreground">{formatDateTime(activity.performedOn)}</span>
                </div>
                <p className="text-sm text-foreground mt-1">{activity.description}</p>
                {activity.metadata && (
                  <div className="mt-2 flex flex-wrap gap-1">
                    {Object.entries(activity.metadata).map(([key, value]) => (
                      <Badge key={key} variant="outline" className="text-xs">
                        {key}: {String(value)}
                      </Badge>
                    ))}
                  </div>
                )}
              </div>
            </div>
          ))}

{hasMore && (
            <div className="text-center pt-4">
              <Button variant="outline" size="sm" onClick={() => setVisibleCount((prev) => prev + 10)}>
                Show More Activity
              </Button>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="src/components/task-watchers.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Eye, EyeOff } from "lucide-react"

interface TaskWatchersProps {
  watchers: string[] // User IDs
  currentUserId: string
  onAddWatcher: (userId: string) => void
  onRemoveWatcher: (userId: string) => void
  className?: string
}

export default function TaskWatchers({
  watchers,
  currentUserId,
  onAddWatcher,
  onRemoveWatcher,
  className,
}: TaskWatchersProps) {
  const [isWatching, setIsWatching] = useState(watchers.includes(currentUserId))

// Mock user data - in a real app, you'd fetch this from an API
  const getUserName = (userId: string) => {
    const userMap: Record<string, string> = {
      "user-1": "John Smith",
      "user-2": "Sarah Johnson",
      "user-3": "Mike Davis",
      "user-4": "Emily Chen",
      "current-user": "You",
    }
    return userMap[userId] || "Unknown User"
  }

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

const handleToggleWatch = () => {
    if (isWatching) {
      onRemoveWatcher(currentUserId)
      setIsWatching(false)
    } else {
      onAddWatcher(currentUserId)
      setIsWatching(true)
    }
  }

return (
    <Card className={className}>
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2">
            <Eye className="h-5 w-5" />
            Watchers ({watchers.length})
          </CardTitle>
          <Button
            variant={isWatching ? "outline" : "default"}
            size="sm"
            onClick={handleToggleWatch}
            className="flex items-center gap-1"
          >
            {isWatching ? (
              <>
                <EyeOff className="h-4 w-4" />
                Unwatch
              </>
            ) : (
              <>
                <Eye className="h-4 w-4" />
                Watch
              </>
            )}
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        {watchers.length === 0 ? (
          <div className="text-center py-4 text-muted-foreground">
            <Eye className="h-8 w-8 mx-auto mb-2 opacity-50" />
            <p>No watchers yet</p>
            <p className="text-sm">Be the first to watch this task</p>
          </div>
        ) : (
          <div className="space-y-3">
            {watchers.map((userId) => {
              const userName = getUserName(userId)
              const isCurrentUser = userId === currentUserId

return (
                <div key={userId} className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Avatar className="h-8 w-8">
                      <AvatarFallback className="text-xs">{getInitials(userName)}</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="text-sm font-medium flex items-center gap-2">
                        {userName}
                        {isCurrentUser && (
                          <Badge variant="secondary" className="text-xs">
                            You
                          </Badge>
                        )}
                      </div>
                    </div>
                  </div>
                  {isCurrentUser && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onRemoveWatcher(userId)}
                      className="text-red-600 hover:text-red-700 hover:bg-red-50"
                    >
                      <EyeOff className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              )
            })}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="src/components/task-comments.tsx"
"use client"

import { useState } from "react"
import type { TaskComment, TaskMention } from "../interfaces/Task"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { formatDateTime } from "../utils/date-helpers"
import { getCharacterCount } from "../utils/task-helpers"
import { CHARACTER_LIMITS } from "../constants/task-constants"
import MentionInput from "./mention-input"
import { MessageSquare, Send } from "lucide-react"

interface TaskCommentsProps {
  comments: TaskComment[]
  onAddComment: (content: string, mentions: TaskMention[]) => void
  className?: string
}

export default function TaskComments({ comments, onAddComment, className }: TaskCommentsProps) {
  const [newComment, setNewComment] = useState("")
  const [mentions, setMentions] = useState<TaskMention[]>([])
  const [isSubmitting, setIsSubmitting] = useState(false)

const { count, remaining, isOverLimit } = getCharacterCount(newComment, CHARACTER_LIMITS.COMMENT)

const handleSubmit = async () => {
    if (!newComment.trim() || isOverLimit) return

setIsSubmitting(true)
    try {
      await onAddComment(newComment.trim(), mentions)
      setNewComment("")
      setMentions([])
    } finally {
      setIsSubmitting(false)
    }
  }

const handleMentionInputChange = (value: string, newMentions: TaskMention[]) => {
    setNewComment(value)
    setMentions(newMentions)
  }

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

const renderCommentWithMentions = (content: string, commentMentions?: TaskMention[]) => {
    if (!commentMentions || commentMentions.length === 0) {
      return content
    }

// Sort mentions by position (descending) to replace from end to start
    const sortedMentions = [...commentMentions].sort((a, b) => b.position - a.position)
    let processedContent = content

sortedMentions.forEach((mention) => {
      const beforeMention = processedContent.slice(0, mention.position)
      const afterMention = processedContent.slice(mention.position + mention.length)
      const mentionElement = `<span class="bg-blue-100 text-blue-800 px-1 rounded font-medium">@${mention.userName}</span>`
      processedContent = beforeMention + mentionElement + afterMention
    })

return processedContent
  }

return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <MessageSquare className="h-5 w-5" />
          Comments ({comments.length})
        </CardTitle>
      </CardHeader>

<CardContent className="space-y-4">
        {/* Add new comment */}
        <div className="space-y-3">
          <MentionInput
            value={newComment}
            onChange={handleMentionInputChange}
            placeholder="Add a comment... Type @ to mention someone"
            className="min-h-[80px]"
          />
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <span className={`text-sm ${isOverLimit ? "text-destructive" : "text-muted-foreground"}`}>
                {count}/{CHARACTER_LIMITS.COMMENT} characters
                {remaining < 50 && remaining >= 0 && <span className="ml-1">({remaining} remaining)</span>}
              </span>
              {mentions.length > 0 && (
                <span className="text-sm text-blue-600">
                  {mentions.length} mention{mentions.length !== 1 ? "s" : ""}
                </span>
              )}
            </div>
            <Button onClick={handleSubmit} disabled={!newComment.trim() || isOverLimit || isSubmitting} size="sm">
              <Send className="h-4 w-4 mr-1" />
              {isSubmitting ? "Adding..." : "Add Comment"}
            </Button>
          </div>
        </div>

{/* Comments list */}
        <div className="space-y-4">
          {comments.length === 0 ? (
            <div className="text-center py-6 text-muted-foreground">
              <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p>No comments yet. Be the first to add one!</p>
            </div>
          ) : (
            comments.map((comment) => (
              <div key={comment.id} className="flex gap-3">
                <Avatar className="h-8 w-8">
                  <AvatarFallback className="text-xs">{getInitials(comment.createdBy)}</AvatarFallback>
                </Avatar>
                <div className="flex-1 space-y-1">
                  <div className="flex items-center gap-2 text-sm">
                    <span className="font-medium">{comment.createdBy}</span>
                    <span className="text-muted-foreground">{formatDateTime(comment.createdOn)}</span>
                    {comment.mentions && comment.mentions.length > 0 && (
                      <span className="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded">
                        {comment.mentions.length} mention{comment.mentions.length !== 1 ? "s" : ""}
                      </span>
                    )}
                  </div>
                  <div
                    className="text-sm text-foreground whitespace-pre-wrap"
                    dangerouslySetInnerHTML={{
                      __html: renderCommentWithMentions(comment.content, comment.mentions),
                    }}
                  />
                </div>
              </div>
            ))
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="src/api/tasks.ts" isQuickEdit="true"
import type {
  Task,
  TaskFormData,
  TaskFilters,
  TaskSortOptions,
  ApiResponse,
  PaginatedResponse,
  TaskStatus,
  TaskMention,
  TaskActivity,
} from "../interfaces/Task"

// Mock API functions - replace with actual API calls
export async function createTask(data: TaskFormData): Promise<ApiResponse<Task>> {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 1000))

const newTask: Task = {
    id: `task-${Date.now()}`,
    ...data,
    status: "In Draft",
    createdBy: "current-user",
    createdOn: new Date(),
    modifiedBy: "current-user",
    modifiedOn: new Date(),
    attachments: [],
    comments: [],
  }

return {
    success: true,
    data: newTask,
    message: "Task created successfully",
  }
}

export async function updateTask(id: string, data: Partial<TaskFormData>): Promise<ApiResponse<Task>> {
  await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock updated task
  const updatedTask: Task = {
    id,
    title: data.title || "Updated Task",
    priority: data.priority || "Normal",
    taskType: data.taskType || "Actionable",
    status: "In Draft",
    submissionTrigger: data.submissionTrigger || "Manual",
    assigneeType: data.assigneeType || "User",
    assignee: data.assignee || "Unknown",
    assigneeId: data.assigneeId || "unknown",
    dueDate: data.dueDate,
    notes: data.notes,
    taskGroup: data.taskGroup,
    createdBy: "current-user",
    createdOn: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1 day ago
    modifiedBy: "current-user",
    modifiedOn: new Date(),
    attachments: [],
    comments: [],
  }

return {
    success: true,
    data: updatedTask,
    message: "Task updated successfully",
  }
}

export async function getTask(id: string): Promise<ApiResponse<Task>> {
  await new Promise((resolve) => setTimeout(resolve, 500))

const task: Task = {
    id,
    title: "Review Enterprise Service Agreement",
    priority: "High",
    taskType: "Verifiable",
    status: "Not Started",
    submissionTrigger: "Work Item Dependent",
    assigneeType: "User",
    assignee: "John Smith",
    assigneeId: "user-1",
    dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
    notes:
      "Please review all contract terms, paying special attention to the service level agreements and penalty clauses. The client has requested expedited review due to year-end deadline constraints.",
    taskGroup: "Legal Review",
    recordId: "contract-2024-001",
    recordName: "Enterprise Contract #2024-001",
    objectType: "Contract",
    createdBy: "Sarah Johnson",
    createdOn: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
    modifiedBy: "Sarah Johnson",
    modifiedOn: new Date(),
    attachments: [],
    comments: [
      {
        id: "comment-1",
        content: "Thanks Sarah. I'll start the review tomorrow morning and should have initial feedback by Wednesday.",
        createdBy: "John Smith",
        createdOn: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
      },
      {
        id: "comment-2",
        content:
          "I've added the updated contract draft. Please focus on sections 5.2 and 7.1 as discussed in our meeting.",
        createdBy: "Sarah Johnson",
        createdOn: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
      },
    ],
  }

return {
    success: true,
    data: task,
  }
}

export async function getTasks(
  filters?: TaskFilters,
  sortOptions?: TaskSortOptions,
  page = 1,
  limit = 10,
): Promise<PaginatedResponse<Task>> {
  await new Promise((resolve) => setTimeout(resolve, 800))

// Mock tasks data
  const allTasks: Task[] = [
    {
      id: "1",
      title: "Review Q4 Contract Terms",
      priority: "High",
      taskType: "Verifiable",
      status: "In Progress",
      submissionTrigger: "Manual",
      assigneeType: "User",
      assignee: "John Smith",
      assigneeId: "user-1",
      dueDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
      recordName: "Enterprise Contract #2024-001",
      createdBy: "admin",
      createdOn: new Date(),
      modifiedBy: "admin",
      modifiedOn: new Date(),
      attachments: [],
      comments: [],
    },
    {
      id: "2",
      title: "Update pricing model documentation",
      priority: "Normal",
      taskType: "Actionable",
      status: "Not Started",
      submissionTrigger: "Manual",
      assigneeType: "User",
      assignee: "Sarah Johnson",
      assigneeId: "user-2",
      dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000),
      taskGroup: "Documentation",
      createdBy: "admin",
      createdOn: new Date(),
      modifiedBy: "admin",
      modifiedOn: new Date(),
      attachments: [],
      comments: [],
    },
    // Add more mock tasks as needed
  ]

// Apply basic filtering (simplified for demo)
  let filteredTasks = allTasks
  if (filters?.search) {
    filteredTasks = filteredTasks.filter((task) => task.title.toLowerCase().includes(filters.search!.toLowerCase()))
  }

// Apply sorting (simplified for demo)
  if (sortOptions) {
    filteredTasks.sort((a, b) => {
      const aValue = a[sortOptions.field as keyof Task]
      const bValue = b[sortOptions.field as keyof Task]

if (sortOptions.direction === "asc") {
        return aValue < bValue ? -1 : aValue > bValue ? 1 : 0
      } else {
        return aValue > bValue ? -1 : aValue < bValue ? 1 : 0
      }
    })
  }

// Apply pagination
  const startIndex = (page - 1) * limit
  const endIndex = startIndex + limit
  const paginatedTasks = filteredTasks.slice(startIndex, endIndex)

return {
    success: true,
    data: paginatedTasks,
    pagination: {
      page,
      limit,
      total: filteredTasks.length,
      totalPages: Math.ceil(filteredTasks.length / limit),
    },
  }
}

export async function deleteTask(id: string): Promise<ApiResponse<void>> {
  await new Promise((resolve) => setTimeout(resolve, 500))

return {
    success: true,
    message: "Task deleted successfully",
  }
}

export async function addTaskComment(
  taskId: string,
  content: string,
  mentions?: TaskMention[],
): Promise<ApiResponse<void>> {
  await new Promise((resolve) => setTimeout(resolve, 500))

// In a real app, this would:
  // 1. Save the comment to the database
  // 2. Send notifications to mentioned users
  // 3. Add activity log entry
  // 4. Update task watchers if needed

console.log(`[API] Added comment to task ${taskId}:`, { content, mentions })

// Mock notification sending for mentions
  if (mentions && mentions.length > 0) {
    mentions.forEach((mention) => {
      console.log(`[Notification] Sending mention notification to ${mention.userName} (${mention.userId})`)
    })
  }

return {
    success: true,
    message: "Comment added successfully",
  }
}

export async function addTaskWatcher(taskId: string, userId: string): Promise<ApiResponse<void>> {
  await new Promise((resolve) => setTimeout(resolve, 300))

console.log(`[API] Added watcher ${userId} to task ${taskId}`)

return {
    success: true,
    message: "Started watching task",
  }
}

export async function removeTaskWatcher(taskId: string, userId: string): Promise<ApiResponse<void>> {
  await new Promise((resolve) => setTimeout(resolve, 300))

console.log(`[API] Removed watcher ${userId} from task ${taskId}`)

return {
    success: true,
    message: "Stopped watching task",
  }
}

export async function getTaskActivity(taskId: string): Promise<ApiResponse<TaskActivity[]>> {
  await new Promise((resolve) => setTimeout(resolve, 500))

// Mock activity data
  const activities: TaskActivity[] = [
    {
      id: "activity-1",
      taskId,
      action: "created",
      description: "Created this task",
      performedBy: "Sarah Johnson",
      performedOn: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
    },
    {
      id: "activity-2",
      taskId,
      action: "assigned",
      description: "Assigned task to John Smith",
      performedBy: "Sarah Johnson",
      performedOn: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
      metadata: { assignee: "John Smith" },
    },
    {
      id: "activity-3",
      taskId,
      action: "commented",
      description: "Added a comment",
      performedBy: "John Smith",
      performedOn: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
    },
    {
      id: "activity-4",
      taskId,
      action: "status_changed",
      description: "Changed status from Not Started to In Progress",
      performedBy: "John Smith",
      performedOn: new Date(Date.now() - 4 * 60 * 60 * 1000),
      metadata: { from: "Not Started", to: "In Progress" },
    },
  ]

return {
    success: true,
    data: activities,
  }
}

export async function updateTaskStatus(id: string, status: TaskStatus, reason?: string): Promise<ApiResponse<Task>> {
  await new Promise((resolve) => setTimeout(resolve, 800))

// Mock updated task with new status
  const updatedTask: Task = {
    id,
    title: "Review Enterprise Service Agreement",
    priority: "High",
    taskType: "Verifiable",
    status: status,
    submissionTrigger: "Manual",
    assigneeType: "User",
    assignee: "John Smith",
    assigneeId: "user-1",
    dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
    notes:
      "Please review all contract terms, paying special attention to the service level agreements and penalty clauses.",
    taskGroup: "Legal Review",
    recordId: "contract-2024-001",
    recordName: "Enterprise Contract #2024-001",
    objectType: "Contract",
    createdBy: "Sarah Johnson",
    createdOn: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
    modifiedBy: "current-user",
    modifiedOn: new Date(),
    actualStartDate: status === "In Progress" ? new Date() : undefined,
    dateOfCompletion: status === "Completed" ? new Date() : undefined,
    attachments: [],
    comments: [],
  }

return {
    success: true,
    data: updatedTask,
    message: `Task status updated to ${status}`,
  }
}

export async function bulkUpdateTaskStatus(taskIds: string[], status: TaskStatus): Promise<ApiResponse<void>> {
  await new Promise((resolve) => setTimeout(resolve, 1200))

return {
    success: true,
    message: `${taskIds.length} tasks updated to ${status}`,
  }
}</article></body></html>