[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" import { useToast } from "@/hooks/use-toast" import { Edit, Trash2, Plus, Search, Download, RefreshCw, Calendar, TrendingUp, Users, Building } from "lucide-react" const DEPARTMENTS = [ "Marketing", "Human Resources", "IT", "Commercial", "Operational", "Legal", "Corporate Communications", ] const USERS_BY_DEPARTMENT = { Marketing: [ { name: "Azzahra", position: "Marketing Specialist" }, { name: "Budi", position: "Marketing Manager" }, { name: "Citra", position: "Digital Marketing Executive" }, ], "Human Resources": [ { name: "Diana", position: "HR Manager" }, { name: "Eko", position: "HR Specialist" }, { name: "Fani", position: "Recruitment Officer" }, ], IT: [ { name: "Gilang", position: "IT Manager" }, { name: "Hana", position: "Software Developer" }, { name: "Ivan", position: "System Administrator" }, ], Commercial: [ { name: "Joko", position: "Commercial Manager" }, { name: "Kiki", position: "Sales Executive" }, { name: "Lina", position: "Business Development" }, ], Operational: [ { name: "Maya", position: "Operations Manager" }, { name: "Nanda", position: "Operations Specialist" }, { name: "Omar", position: "Logistics Coordinator" }, ], Legal: [ { name: "Putri", position: "Legal Manager" }, { name: "Qori", position: "Legal Officer" }, { name: "Rina", position: "Compliance Specialist" }, ], "Corporate Communications": [ { name: "Sari", position: "Communications Manager" }, { name: "Toni", position: "PR Specialist" }, { name: "Uci", position: "Content Creator" }, ], } const APPROVERS = [ { name: "Aziza", position: "Marketing Manager", id: "1" }, { name: "Bambang", position: "HR Director", id: "2" }, { name: "Candra", position: "IT Director", id: "3" }, { name: "Dewi", position: "Commercial Director", id: "4" }, { name: "Edi", position: "Operations Director", id: "5" }, { name: "Farah", position: "Legal Director", id: "6" }, { name: "Gani", position: "Communications Director", id: "7" }, ] const EDUCATION_LEVELS = ["SMA", "SMK", "D3", "S1", "S2"] interface ManpowerRequest { id: string departmentName: string requestorName: string requestorPosition: string requestDate: string jobTitle: string numberOfEmployees: number typeOfEmployment: "Permanent" | "Contract" | "Outsourcing" | "Internship" workLocation: string reasonForRequest: "Resignation" | "New Project" | "Additional Manpower" | "Others" additionalExplanation: string minimumEducation: string yearsOfExperience: number requiredSkills: string certifications?: string expectedStartDate: string approvers: Array<{ name: string; position: string; id: string }> status: "Pending" | "Approved" | "Rejected" createdAt: string priority: "Low" | "Medium" | "High" | "Urgent" } function AddRequestForm({ onBack, onSubmit, }: { onBack: () => void; onSubmit: (newRequest: Omit) => void }) { const { toast } = useToast() const [formData, setFormData] = useState({ departmentName: "", requestorName: "", requestorPosition: "", requestDate: new Date().toISOString().split("T")[0], jobTitle: "", numberOfEmployees: 1, typeOfEmployment: "Permanent" as const, workLocation: "", priority: "Medium" as "Low" | "Medium" | "High" | "Urgent", reasonForRequest: "New Project" as const, additionalExplanation: "", minimumEducation: "", yearsOfExperience: 0, requiredSkills: "", certifications: "", expectedStartDate: "", approvers: [] as Array<{ name: string; position: string; id: string }>, status: "Pending" as const, }) const [showCustomDepartment, setShowCustomDepartment] = useState(false) const [customDepartment, setCustomDepartment] = useState("") const [availableUsers, setAvailableUsers] = useState<{ name: string; position: string }[]>([]) const [selectedApprover, setSelectedApprover] = useState("") const [lastSaved, setLastSaved] = useState(null) const [isAutoSaving, setIsAutoSaving] = useState(false) useEffect(() => { const savedDraft = localStorage.getItem("manpower-request-draft") if (savedDraft) { try { const parsedDraft = JSON.parse(savedDraft) setFormData(parsedDraft) setLastSaved(new Date(localStorage.getItem("manpower-request-draft-timestamp") || Date.now())) toast({ title: "Draft Restored", description: "Your previous draft has been restored.", }) } catch (error) { console.error("Error restoring draft:", error) } } }, []) useEffect(() => { const timeoutId = setTimeout(() => { if (formData.departmentName || formData.jobTitle || formData.requestorName) { setIsAutoSaving(true) localStorage.setItem("manpower-request-draft", JSON.stringify(formData)) localStorage.setItem("manpower-request-draft-timestamp", new Date().toISOString()) setLastSaved(new Date()) setTimeout(() => { setIsAutoSaving(false) }, 1000) } }, 2000) return () => clearTimeout(timeoutId) }, [formData]) useEffect(() => { if (formData.departmentName && USERS_BY_DEPARTMENT[formData.departmentName as keyof typeof USERS_BY_DEPARTMENT]) { setAvailableUsers(USERS_BY_DEPARTMENT[formData.departmentName as keyof typeof USERS_BY_DEPARTMENT]) } else { setAvailableUsers([]) } }, [formData.departmentName]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (formData.approvers.length === 0) { toast({ title: "Validation Error", description: "Please select at least one approver.", variant: "destructive", }) return } onSubmit(formData) localStorage.removeItem("manpower-request-draft") localStorage.removeItem("manpower-request-draft-timestamp") toast({ title: "Request Submitted", description: "The manpower request has been successfully submitted.", }) onBack() } const handleClearDraft = () => { localStorage.removeItem("manpower-request-draft") localStorage.removeItem("manpower-request-draft-timestamp") setLastSaved(null) toast({ title: "Draft Cleared", description: "Saved draft has been cleared.", }) } const handleDepartmentChange = (value: string) => { if (value === "custom") { setShowCustomDepartment(true) setFormData({ ...formData, departmentName: "", requestorName: "", requestorPosition: "" }) } else { setShowCustomDepartment(false) setCustomDepartment("") setFormData({ ...formData, departmentName: value, requestorName: "", requestorPosition: "" }) } } const handleCustomDepartmentChange = (value: string) => { setCustomDepartment(value) setFormData({ ...formData, departmentName: value }) } const handleRequestorChange = (value: string) => { const [name, position] = value.split(" - ") setFormData({ ...formData, requestorName: name, requestorPosition: position }) } const handleApproverChange = (value: string) => { setSelectedApprover(value) } const handleAddApprover = () => { if (!selectedApprover) return const [name, position] = selectedApprover.split(" - ") const newApprover = { id: `${Date.now()}-${Math.random()}`, name, position, } const exists = formData.approvers.some((app) => app.name === name && app.position === position) if (exists) { toast({ title: "Duplicate Approver", description: "This approver has already been added.", variant: "destructive", }) return } setFormData({ ...formData, approvers: [...formData.approvers, newApprover], }) setSelectedApprover("") toast({ title: "Approver Added", description: `${name} has been added as an approver.`, }) } const handleRemoveApprover = (approverId: string) => { setFormData({ ...formData, approvers: formData.approvers.filter((app) => app.id !== approverId), }) toast({ title: "Approver Removed", description: "Approver has been removed from the list.", }) } return (

Create New Manpower Request

{isAutoSaving && (

Saving draft... )} {lastSaved && !isAutoSaving && ( Last saved: {lastSaved.toLocaleTimeString()} )} {lastSaved && ( )}

1. Department Information

Department Name * {showCustomDepartment && ( handleCustomDepartmentChange(e.target.value)} required /> )}

Requestor Name & Position *

Request Date * setFormData({ ...formData, requestDate: e.target.value })} required />

2. Position Details

Job Title / Position * setFormData({ ...formData, jobTitle: e.target.value })} required />

Number of Employees Needed * setFormData({ ...formData, numberOfEmployees: Number.parseInt(e.target.value) })} required />

Type of Employment *

Priority / Urgency Level *

Work Location * setFormData({ ...formData, workLocation: e.target.value })} required />

3. Reason for Request

Reason for Request *

Additional Explanation

setFormData({ ...formData, additionalExplanation: e.target.value })}
                rows={3}
              />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>4. Required Qualifications</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="minimumEducation">Minimum Education *</Label>
                <Select
                  value={formData.minimumEducation}
                  onValueChange={(value) => setFormData({ ...formData, minimumEducation: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select Education Level" />
                  </SelectTrigger>
                  <SelectContent>
                    {EDUCATION_LEVELS.map((level) => (
                      <SelectItem key={level} value={level}>
                        {level}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="yearsOfExperience">Years of Experience *</Label>
                <Input
                  id="yearsOfExperience"
                  type="number"
                  min="0"
                  value={formData.yearsOfExperience}
                  onChange={(e) => setFormData({ ...formData, yearsOfExperience: Number.parseInt(e.target.value) })}
                  required
                />
              </div>
            </div>
            <div>
              <Label htmlFor="requiredSkills">Required Skills *</Label>
              <Textarea
                id="requiredSkills"
                value={formData.requiredSkills}
                onChange={(e) => setFormData({ ...formData, requiredSkills: e.target.value })}
                rows={3}
                required
              />
            </div>
            <div>
              <Label htmlFor="certifications">Certifications (Optional)</Label>
              <Input
                id="certifications"
                value={formData.certifications}
                onChange={(e) => setFormData({ ...formData, certifications: e.target.value })}
              />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>5. Expected Start Date</CardTitle>
          </CardHeader>
          <CardContent>
            <div>
              <Label htmlFor="expectedStartDate">Expected Start Date *</Label>
              <Input
                id="expectedStartDate"
                type="date"
                value={formData.expectedStartDate}
                onChange={(e) => setFormData({ ...formData, expectedStartDate: e.target.value })}
                required
              />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>6. Approval Section</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="approver">Add Approver *</Label>
              <div className="flex gap-2">
                <Select value={selectedApprover} onValueChange={setSelectedApprover}>
                  <SelectTrigger className="flex-1">
                    <SelectValue placeholder="Select Approver" />
                  </SelectTrigger>
                  <SelectContent>
                    {APPROVERS.map((approver) => (
                      <SelectItem
                        key={`${approver.name}-${approver.position}`}
                        value={`${approver.name} - ${approver.position}`}
                      >
                        {approver.name} - {approver.position}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Button
                  type="button"
                  onClick={handleAddApprover}
                  disabled={!selectedApprover}
                  className="flex items-center gap-2"
                >
                  <Plus className="h-4 w-4" />
                  Add
                </Button>
              </div>
            </div>

{formData.approvers.length > 0 && (
              <div>
                <Label>Selected Approvers ({formData.approvers.length})</Label>
                <div className="mt-2 space-y-2">
                  {formData.approvers.map((approver) => (
                    <div
                      key={approver.id}
                      className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border"
                    >
                      <div>
                        <p className="font-medium">{approver.name}</p>
                        <p className="text-sm text-muted-foreground">{approver.position}</p>
                      </div>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => handleRemoveApprover(approver.id)}
                        className="text-red-600 hover:text-red-700"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            )}

{formData.approvers.length === 0 && (
              <p className="text-sm text-muted-foreground bg-yellow-50 p-3 rounded-lg border border-yellow-200">
                ⚠️ Please add at least one approver to submit the request.
              </p>
            )}
          </CardContent>
        </Card>

<div className="flex justify-end space-x-4">
          <Button type="button" variant="outline" onClick={onBack}>
            Cancel
          </Button>
          <Button type="submit">Submit Request</Button>
        </div>
      </form>
    </div>
  )
}

function EditRequestForm({
  request,
  onBack,
  requests,
  setRequests,
}: {
  request: ManpowerRequest
  onBack: () => void
  requests: ManpowerRequest[]
  setRequests: (requests: ManpowerRequest[]) => void
}) {
  const { toast } = useToast()
  const [formData, setFormData] = useState({
    departmentName: request.departmentName,
    requestorName: request.requestorName,
    requestorPosition: request.requestorPosition,
    requestDate: request.requestDate,
    jobTitle: request.jobTitle,
    numberOfEmployees: request.numberOfEmployees,
    typeOfEmployment: request.typeOfEmployment,
    workLocation: request.workLocation,
    reasonForRequest: request.reasonForRequest,
    additionalExplanation: request.additionalExplanation,
    minimumEducation: request.minimumEducation,
    yearsOfExperience: request.yearsOfExperience,
    requiredSkills: request.requiredSkills,
    certifications: request.certifications || "",
    expectedStartDate: request.expectedStartDate,
    approvers: request.approvers || [],
    status: request.status,
    priority: request.priority,
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const updatedRequests = requests.map((req) => (req.id === request.id ? { ...req, ...formData } : req))
    setRequests(updatedRequests)
    localStorage.setItem("manpowerRequests", JSON.stringify(updatedRequests))
    toast({
      title: "Request Updated",
      description: "The manpower request has been successfully updated.",
    })
    onBack()
  }

return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">Edit Manpower Request</h1>
        <Button variant="outline" onClick={onBack}>
          Back to List
        </Button>
      </div>

<form onSubmit={handleSubmit} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="departmentName">Department Name</Label>
            <Input
              id="departmentName"
              value={formData.departmentName}
              onChange={(e) => setFormData({ ...formData, departmentName: e.target.value })}
            />
          </div>
          <div>
            <Label htmlFor="jobTitle">Job Title</Label>
            <Input
              id="jobTitle"
              value={formData.jobTitle}
              onChange={(e) => setFormData({ ...formData, jobTitle: e.target.value })}
            />
          </div>
          <div>
            <Label htmlFor="numberOfEmployees">Number of Employees</Label>
            <Input
              id="numberOfEmployees"
              type="number"
              value={formData.numberOfEmployees}
              onChange={(e) => setFormData({ ...formData, numberOfEmployees: Number.parseInt(e.target.value) })}
            />
          </div>
          <div>
            <Label htmlFor="status">Status</Label>
            <Select value={formData.status} onValueChange={(value: any) => setFormData({ ...formData, status: value })}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Pending">Pending</SelectItem>
                <SelectItem value="Approved">Approved</SelectItem>
                <SelectItem value="Rejected">Rejected</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label htmlFor="priority">Priority / Urgency Level</Label>
            <Select
              value={formData.priority}
              onValueChange={(value: any) => setFormData({ ...formData, priority: value })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Low">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    Low
                  </div>
                </SelectItem>
                <SelectItem value="Medium">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
                    Medium
                  </div>
                </SelectItem>
                <SelectItem value="High">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                    High
                  </div>
                </SelectItem>
                <SelectItem value="Urgent">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    Urgent
                  </div>
                </SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

<div>
          <Label>Approvers</Label>
          <div className="mt-2 space-y-2">
            {formData.approvers && formData.approvers.length > 0 ? (
              formData.approvers.map((approver) => (
                <div key={approver.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border">
                  <div>
                    <p className="font-medium">{approver.name}</p>
                    <p className="text-sm text-muted-foreground">{approver.position}</p>
                  </div>
                </div>
              ))
            ) : (
              <p className="text-sm text-muted-foreground">No approvers assigned</p>
            )}
          </div>
        </div>

<div className="flex justify-end space-x-4">
          <Button type="button" variant="outline" onClick={onBack}>
            Cancel
          </Button>
          <Button type="submit">Update Request</Button>
        </div>
      </form>
    </div>
  )
}

export default function ManpowerRequestList() {
  const [requests, setRequests] = useState<ManpowerRequest[]>([])
  const [currentView, setCurrentView] = useState<"list" | "add" | "edit">("list")
  const [editingRequest, setEditingRequest] = useState<ManpowerRequest | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [departmentFilter, setDepartmentFilter] = useState<string>("all")
  const { toast } = useToast()

useEffect(() => {
    const savedRequests = localStorage.getItem("manpowerRequests")
    if (savedRequests) {
      try {
        const parsedRequests = JSON.parse(savedRequests)
        setRequests(parsedRequests)
      } catch (error) {
        console.error("Error parsing saved requests:", error)
        setRequests([])
      }
    }
  }, [])

const statusCounts = {
    pending: requests.filter((req) => req.status === "Pending").length,
    approved: requests.filter((req) => req.status === "Approved").length,
    rejected: requests.filter((req) => req.status === "Rejected").length,
    total: requests.length,
  }

const departmentBreakdown = DEPARTMENTS.reduce(
    (acc, dept) => {
      acc[dept] = requests.filter((req) => req.departmentName === dept).length
      return acc
    },
    {} as Record<string, number>,
  )

const recentRequests = requests
    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    .slice(0, 5)

const filteredRequests = requests.filter((request) => {
    const matchesSearch =
      request.departmentName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      request.jobTitle.toLowerCase().includes(searchTerm.toLowerCase()) ||
      request.requestorName.toLowerCase().includes(searchTerm.toLowerCase())

const matchesStatus = statusFilter === "all" || request.status === statusFilter
    const matchesDepartment = departmentFilter === "all" || request.departmentName === departmentFilter

return matchesSearch && matchesStatus && matchesDepartment
  })

const handleExportCSV = () => {
    const csvContent = [
      ["Department", "Position", "Requestor", "Employees", "Status", "Request Date", "Approvers", "Priority"],
      ...filteredRequests.map((req) => [
        req.departmentName,
        req.jobTitle,
        req.requestorName,
        req.numberOfEmployees.toString(),
        req.status,
        req.requestDate,
        req.approvers.map((app) => `${app.name} - ${app.position}`).join(", "),
        req.priority,
      ]),
    ]
      .map((row) => row.join(","))
      .join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "manpower-requests.csv"
    a.click()
    window.URL.revokeObjectURL(url)

toast({
      title: "Export Successful",
      description: "Manpower requests have been exported to CSV.",
    })
  }

const handleRefresh = () => {
    const savedRequests = localStorage.getItem("manpowerRequests")
    if (savedRequests) {
      try {
        const parsedRequests = JSON.parse(savedRequests)
        setRequests(parsedRequests)
        toast({
          title: "Data Refreshed",
          description: "Manpower requests have been refreshed.",
        })
      } catch (error) {
        console.error("Error parsing saved requests:", error)
      }
    }
  }

const getStatusBadgeClass = (status: ManpowerRequest["status"]) => {
    switch (status) {
      case "Pending":
        return "bg-yellow-100 text-yellow-800"
      case "Approved":
        return "bg-green-100 text-green-800"
      case "Rejected":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleEditRequest = (request: ManpowerRequest) => {
    setEditingRequest(request)
    setCurrentView("edit")
  }

const handleDeleteRequest = (id: string) => {
    const updatedRequests = requests.filter((req) => req.id !== id)
    setRequests(updatedRequests)
    localStorage.setItem("manpowerRequests", JSON.stringify(updatedRequests))
    toast({
      title: "Request Deleted",
      description: "The manpower request has been successfully deleted.",
    })
  }

const handleAddRequest = (newRequest: Omit<ManpowerRequest, "id" | "createdAt">) => {
    const request: ManpowerRequest = {
      ...newRequest,
      id: Date.now().toString(),
      createdAt: new Date().toISOString(),
    }
    const updatedRequests = [...requests, request]
    setRequests(updatedRequests)
    localStorage.setItem("manpowerRequests", JSON.stringify(updatedRequests))
  }

if (currentView === "add") {
    return <AddRequestForm onBack={() => setCurrentView("list")} onSubmit={handleAddRequest} />
  }

if (currentView === "edit" && editingRequest) {
    return (
      <EditRequestForm
        request={editingRequest}
        onBack={() => setCurrentView("list")}
        requests={requests}
        setRequests={setRequests}
      />
    )
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold">Manpower Request Management</h1>
          <p className="text-muted-foreground">Manage and track manpower requests across departments</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={handleRefresh} className="flex items-center gap-2 bg-transparent">
            <RefreshCw className="h-4 w-4" />
            Refresh
          </Button>
          <Button variant="outline" onClick={handleExportCSV} className="flex items-center gap-2 bg-transparent">
            <Download className="h-4 w-4" />
            Export CSV
          </Button>
          <Button onClick={() => setCurrentView("add")} className="flex items-center gap-2">
            <Plus className="h-4 w-4" />
            Create New Request
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="border-l-4 border-l-blue-500">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Total Requests</p>
                <p className="text-2xl font-bold">{statusCounts.total}</p>
              </div>
              <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
                <Users className="h-6 w-6 text-blue-600" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-yellow-500">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Pending</p>
                <p className="text-2xl font-bold text-yellow-600">{statusCounts.pending}</p>
              </div>
              <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center">
                <Calendar className="h-6 w-6 text-yellow-600" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-green-500">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Approved</p>
                <p className="text-2xl font-bold text-green-600">{statusCounts.approved}</p>
              </div>
              <div className="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center">
                <TrendingUp className="h-6 w-6 text-green-600" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-red-500">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Rejected</p>
                <p className="text-2xl font-bold text-red-600">{statusCounts.rejected}</p>
              </div>
              <div className="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center">
                <div className="h-6 w-6 bg-red-600 rounded-full"></div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Building className="h-5 w-5" />
              Department Breakdown
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              {Object.entries(departmentBreakdown).map(([dept, count]) => (
                <div key={dept} className="text-center p-3 bg-gray-50 rounded-lg">
                  <p className="text-sm font-medium text-muted-foreground">{dept}</p>
                  <p className="text-xl font-bold">{count}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Calendar className="h-5 w-5" />
              Recent Activity
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {recentRequests.length === 0 ? (
                <p className="text-sm text-muted-foreground">No recent activity</p>
              ) : (
                recentRequests.map((request) => (
                  <div key={request.id} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                    <div>
                      <p className="text-sm font-medium">{request.jobTitle}</p>
                      <p className="text-xs text-muted-foreground">{request.departmentName}</p>
                    </div>
                    <Badge className={getStatusBadgeClass(request.status)} variant="secondary">
                      {request.status}
                    </Badge>
                  </div>
                ))
              )}
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Manpower Requests</CardTitle>
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search by department, position, or requestor..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full sm:w-40">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="Pending">Pending</SelectItem>
                <SelectItem value="Approved">Approved</SelectItem>
                <SelectItem value="Rejected">Rejected</SelectItem>
              </SelectContent>
            </Select>
            <Select value={departmentFilter} onValueChange={setDepartmentFilter}>
              <SelectTrigger className="w-full sm:w-48">
                <SelectValue placeholder="Filter by department" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Departments</SelectItem>
                {DEPARTMENTS.map((dept) => (
                  <SelectItem key={dept} value={dept}>
                    {dept}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Department</TableHead>
                <TableHead>Position</TableHead>
                <TableHead>Requestor</TableHead>
                <TableHead>Employees</TableHead>
                <TableHead>Approvers</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Priority</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredRequests.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
                    {requests.length === 0
                      ? "No manpower requests found. Create your first request to get started."
                      : "No requests match your current filters."}
                  </TableCell>
                </TableRow>
              ) : (
                filteredRequests.map((request) => (
                  <TableRow key={request.id}>
                    <TableCell className="font-medium">{request.departmentName}</TableCell>
                    <TableCell>{request.jobTitle}</TableCell>
                    <TableCell>{request.requestorName}</TableCell>
                    <TableCell>{request.numberOfEmployees}</TableCell>
                    <TableCell>
                      {request.approvers && request.approvers.length > 0 ? (
                        <div className="space-y-1">
                          {request.approvers.slice(0, 2).map((approver) => (
                            <div key={approver.id} className="text-xs">
                              {approver.name}
                            </div>
                          ))}
                          {request.approvers.length > 2 && (
                            <div className="text-xs text-muted-foreground">+{request.approvers.length - 2} more</div>
                          )}
                        </div>
                      ) : (
                        <span className="text-muted-foreground text-sm">No approvers</span>
                      )}
                    </TableCell>
                    <TableCell>
                      <Badge className={getStatusBadgeClass(request.status)}>{request.status}</Badge>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm">{request.priority}</span>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleEditRequest(request)}
                          className="flex items-center gap-1"
                        >
                          <Edit className="h-3 w-3" />
                          Edit
                        </Button>
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <Button
                              variant="outline"
                              size="sm"
                              className="flex items-center gap-1 text-red-600 hover:text-red-700 bg-transparent"
                            >
                              <Trash2 className="h-3 w-3" />
                              Delete
                            </Button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                              <AlertDialogDescription>
                                This action cannot be undone. This will permanently delete the manpower request.
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>Cancel</AlertDialogCancel>
                              <AlertDialogAction onClick={() => handleDeleteRequest(request.id)}>
                                Delete
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}</article></body></html>