"use client" import { useState } from "react" import { motion } from "framer-motion" import { ClipboardList, BarChart3, Plus, CheckCircle, Clock } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Progress } from "@/components/ui/progress" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { cn } from "@/lib/utils" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const surveys = [ { id: 1, title: "Employee Engagement Survey Q2", status: "In Progress", deadline: "Jun 20, 2026", responses: 45, target: 120, category: "Engagement" }, { id: 2, title: "Remote Work Satisfaction", status: "Completed", deadline: "Jun 5, 2026", responses: 98, target: 98, category: "Workplace" }, { id: 3, title: "Manager Feedback Survey", status: "Pending", deadline: "Jul 1, 2026", responses: 0, target: 50, category: "Management" }, { id: 4, title: "Diversity & Inclusion Survey", status: "Completed", deadline: "May 30, 2026", responses: 112, target: 112, category: "Culture" }, { id: 5, title: "Benefits Satisfaction Poll", status: "In Progress", deadline: "Jun 25, 2026", responses: 32, target: 80, category: "HR" }, { id: 6, title: "Office Layout Preferences", status: "Completed", deadline: "May 15, 2026", responses: 67, target: 67, category: "Workplace" }, ] export default function Surveys() { return (

Surveys

Participate in company surveys and polls.

Active ({surveys.filter((s) => s.status === "In Progress" || s.status === "Pending").length}) Completed ({surveys.filter((s) => s.status === "Completed").length}) All ({surveys.length}) {["active", "completed", "all"].map((tab) => ( {surveys .filter((s) => { if (tab === "active") return s.status !== "Completed" if (tab === "completed") return s.status === "Completed" return true }) .map((survey) => (

{survey.status === "Completed" && } {survey.status}

{survey.title} {survey.category}

{survey.deadline}

{survey.responses} responses {Math.round((survey.responses / survey.target) * 100)}%

))} ))}

) }