"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Monitor, Plus, Wrench, Clock, AlertTriangle, Laptop, Mouse, Headphones } 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 { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" 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 equipmentList = [ { id: 1, name: "MacBook Pro 16\" M3 Pro", serial: "MBP-2026-001", type: "Laptop", assigned: "Jan 15, 2026", status: "Active", condition: "Good", icon: Laptop }, { id: 2, name: "Dell UltraSharp 27\" Monitor", serial: "MON-2026-002", type: "Monitor", assigned: "Jan 15, 2026", status: "Active", condition: "Excellent", icon: Monitor }, { id: 3, name: "Logitech MX Master 3S", serial: "MOU-2026-003", type: "Mouse", assigned: "Jan 15, 2026", status: "Active", condition: "Good", icon: Mouse }, { id: 4, name: "Sony WH-1000XM5", serial: "HP-2026-004", type: "Headphones", assigned: "Feb 1, 2026", status: "Active", condition: "Good", icon: Headphones }, { id: 5, name: "Magic Keyboard", serial: "KB-2025-012", type: "Keyboard", assigned: "Mar 10, 2025", status: "Maintenance", condition: "Fair", icon: Laptop }, ] const statusStyles: Record = { Active: "bg-emerald-500/10 text-emerald-600 border-emerald-200 dark:border-emerald-800", Maintenance: "bg-amber-500/10 text-amber-600 border-amber-200 dark:border-amber-800", Retired: "bg-muted text-muted-foreground border-border", } export default function Equipment() { const [showRequest, setShowRequest] = useState(false) const [selectedEquipment, setSelectedEquipment] = useState(null) return (

Equipment

Track and manage your assigned equipment.

{showRequest && ( Request Equipment Request new equipment or report an issue.

Request Type

Equipment Type

Description

</div>
                  <div className="flex gap-2">
                    <Button size="sm">Submit Request</Button>
                    <Button size="sm" variant="outline" onClick={() => setShowRequest(false)}>Cancel</Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}
        </AnimatePresence>

<motion.div variants={staggerItem}>
          <Tabs defaultValue="assigned">
            <TabsList>
              <TabsTrigger value="assigned">Assigned to Me ({equipmentList.length})</TabsTrigger>
              <TabsTrigger value="history">History</TabsTrigger>
            </TabsList>

<TabsContent value="assigned" className="mt-4 space-y-3">
              <motion.div variants={stagger} initial="hidden" animate="visible">
                {equipmentList.map((item) => {
                  const Icon = item.icon
                  return (
                    <motion.div key={item.id} variants={staggerItem}>
                      <motion.div variants={cardHover} initial="rest" whileHover="hover">
                        <Card size="sm">
                          <CardContent className="flex items-center gap-4 py-3">
                            <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
                              <Icon className="size-5 text-muted-foreground" />
                            </div>
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center gap-2">
                                <p className="text-sm font-medium">{item.name}</p>
                                <Badge variant="outline" className={cn("text-[10px]", statusStyles[item.status])}>{item.status}</Badge>
                              </div>
                              <p className="text-xs text-muted-foreground">SN: {item.serial} · {item.condition}</p>
                            </div>
                            <div className="flex gap-2">
                              <Button variant="outline" size="sm" className="h-8">
                                <Wrench className="size-3.5 mr-1" />
                                Report Issue
                              </Button>
                            </div>
                          </CardContent>
                        </Card>
                      </motion.div>
                    </motion.div>
                  )
                })}
              </motion.div>
            </TabsContent>

<TabsContent value="history" className="mt-4">
              <p className="py-12 text-center text-sm text-muted-foreground">No equipment history available.</p>
            </TabsContent>
          </Tabs>
        </motion.div>
      </motion.div>
    </div>
  )
}
</article></body></html>