import { useState, useEffect } from 'react';
import { 
  Users, 
  Calendar, 
  BarChart3, 
  FileText, 
  Settings, 
  Bell, 
  Search, 
  UserCircle,
  Clock,
  CalendarDays,
  Award,
  Briefcase,
  ArrowUpRight,
  ArrowDownRight,
  MoreHorizontal,
  Plus,
  X,
  Check,
  Download,
  Upload,
  ChevronDown,
  ChevronRight,
  Edit,
  Trash2,
  Eye,
  LogOut,
  User,
  Mail,
  Phone,
  MapPin,
  Calendar as CalendarIcon,
  AlertCircle,
  CheckCircle2,
  XCircle,
  Filter,
  ArrowUpDown,
  ChevronLeft,
  ChevronUp
} from 'lucide-react';

// Mock data
const employeesData = [
  { id: 1, name: "John Doe", email: "john.doe@company.com", phone: "+1 (555) 123-4567", position: "Software Engineer", department: "Engineering", status: "Active", joinDate: "2021-05-15", salary: 85000, manager: "Lisa Johnson", avatar: "https://randomuser.me/api/portraits/men/1.jpg" },
  { id: 2, name: "Jane Smith", email: "jane.smith@company.com", phone: "+1 (555) 234-5678", position: "HR Manager", department: "Human Resources", status: "Active", joinDate: "2020-03-10", salary: 92000, manager: "Michael Brown", avatar: "https://randomuser.me/api/portraits/women/2.jpg" },
  { id: 3, name: "Robert Johnson", email: "robert.j@company.com", phone: "+1 (555) 345-6789", position: "Product Manager", department: "Product", status: "On Leave", joinDate: "2019-11-05", salary: 105000, manager: "Sarah Williams", avatar: "https://randomuser.me/api/portraits/men/3.jpg" },
  { id: 4, name: "Emily Davis", email: "emily.d@company.com", phone: "+1 (555) 456-7890", position: "UX Designer", department: "Design", status: "Active", joinDate: "2022-01-20", salary: 78000, manager: "David Miller", avatar: "https://randomuser.me/api/portraits/women/4.jpg" },
  { id: 5, name: "Michael Wilson", email: "michael.w@company.com", phone: "+1 (555) 567-8901", position: "Marketing Specialist", department: "Marketing", status: "Active", joinDate: "2021-08-12", salary: 72000, manager: "Jennifer Taylor", avatar: "https://randomuser.me/api/portraits/men/5.jpg" },
  { id: 6, name: "Sarah Thompson", email: "sarah.t@company.com", phone: "+1 (555) 678-9012", position: "Financial Analyst", department: "Finance", status: "Active", joinDate: "2020-06-30", salary: 88000, manager: "Robert Clark", avatar: "https://randomuser.me/api/portraits/women/6.jpg" },
  { id: 7, name: "David Miller", email: "david.m@company.com", phone: "+1 (555) 789-0123", position: "Design Director", department: "Design", status: "Active", joinDate: "2018-04-15", salary: 115000, manager: "Michael Brown", avatar: "https://randomuser.me/api/portraits/men/7.jpg" },
  { id: 8, name: "Jennifer Taylor", email: "jennifer.t@company.com", phone: "+1 (555) 890-1234", position: "Marketing Director", department: "Marketing", status: "Active", joinDate: "2019-02-28", salary: 110000, manager: "Michael Brown", avatar: "https://randomuser.me/api/portraits/women/8.jpg" },
];

const departmentsData = [
  { id: 1, name: "Engineering", manager: "Lisa Johnson", employeeCount: 12, budget: 1200000 },
  { id: 2, name: "Human Resources", manager: "Jane Smith", employeeCount: 5, budget: 450000 },
  { id: 3, name: "Product", manager: "Sarah Williams", employeeCount: 8, budget: 900000 },
  { id: 4, name: "Design", manager: "David Miller", employeeCount: 7, budget: 650000 },
  { id: 5, name: "Marketing", manager: "Jennifer Taylor", employeeCount: 6, budget: 580000 },
  { id: 6, name: "Finance", manager: "Robert Clark", employeeCount: 4, budget: 520000 },
];

const attendanceData = [
  { day: "Mon", present: 45, absent: 3, leave: 2 },
  { day: "Tue", present: 47, absent: 2, leave: 1 },
  { day: "Wed", present: 44, absent: 4, leave: 2 },
  { day: "Thu", present: 46, absent: 2, leave: 2 },
  { day: "Fri", present: 43, absent: 5, leave: 2 },
];

const attendanceRecords = [
  { id: 1, employeeId: 1, employeeName: "John Doe", date: "2023-06-15", clockIn: "09:02:34", clockOut: "17:30:12", status: "Present", workHours: "8:28" },
  { id: 2, employeeId: 2, employeeName: "Jane Smith", date: "2023-06-15", clockIn: "08:55:21", clockOut: "17:45:05", status: "Present", workHours: "8:50" },
  { id: 3, employeeId: 3, employeeName: "Robert Johnson", date: "2023-06-15", clockIn: null, clockOut: null, status: "On Leave", workHours: "0:00" },
  { id: 4, employeeId: 4, employeeName: "Emily Davis", date: "2023-06-15", clockIn: "09:10:45", clockOut: "17:15:33", status: "Present", workHours: "8:05" },
  { id: 5, employeeId: 5, employeeName: "Michael Wilson", date: "2023-06-15", clockIn: "08:45:12", clockOut: "18:10:22", status: "Present", workHours: "9:25" },
  { id: 6, employeeId: 1, employeeName: "John Doe", date: "2023-06-14", clockIn: "08:58:34", clockOut: "17:32:12", status: "Present", workHours: "8:34" },
  { id: 7, employeeId: 2, employeeName: "Jane Smith", date: "2023-06-14", clockIn: "09:05:21", clockOut: "17:40:05", status: "Present", workHours: "8:35" },
  { id: 8, employeeId: 3, employeeName: "Robert Johnson", date: "2023-06-14", clockIn: "09:15:45", clockOut: "17:20:33", status: "Present", workHours: "8:05" },
];

const leaveTypes = [
  { id: 1, name: "Annual Leave", daysAllowed: 20, carryForward: true, description: "Regular vacation time" },
  { id: 2, name: "Sick Leave", daysAllowed: 10, carryForward: false, description: "For medical reasons" },
  { id: 3, name: "Personal Leave", daysAllowed: 5, carryForward: false, description: "For personal matters" },
  { id: 4, name: "Maternity Leave", daysAllowed: 90, carryForward: false, description: "For new mothers" },
  { id: 5, name: "Paternity Leave", daysAllowed: 14, carryForward: false, description: "For new fathers" },
  { id: 6, name: "Bereavement Leave", daysAllowed: 5, carryForward: false, description: "For family loss" },
];

const leaveBalances = [
  { employeeId: 1, annualLeave: 15, sickLeave: 8, personalLeave: 3 },
  { employeeId: 2, annualLeave: 12, sickLeave: 10, personalLeave: 5 },
  { employeeId: 3, annualLeave: 5, sickLeave: 6, personalLeave: 2 },
  { employeeId: 4, annualLeave: 18, sickLeave: 9, personalLeave: 4 },
  { employeeId: 5, annualLeave: 10, sickLeave: 7, personalLeave: 3 },
];

const leaveRequests = [
  { id: 1, employeeId: 2, employeeName: "Jane Smith", type: "Sick Leave", from: "2023-06-15", to: "2023-06-16", days: 2, reason: "Not feeling well", status: "Approved", approvedBy: "Michael Brown", appliedOn: "2023-06-14" },
  { id: 2, employeeId: 3, employeeName: "Robert Johnson", type: "Annual Leave", from: "2023-06-20", to: "2023-06-25", days: 6, reason: "Family vacation", status: "Pending", approvedBy: null, appliedOn: "2023-06-10" },
  { id: 3, employeeId: 4, employeeName: "Emily Davis", type: "Personal Leave", from: "2023-06-18", to: "2023-06-18", days: 1, reason: "Personal matter", status: "Approved", approvedBy: "David Miller", appliedOn: "2023-06-15" },
  { id: 4, employeeId: 1, employeeName: "John Doe", type: "Annual Leave", from: "2023-07-10", to: "2023-07-15", days: 6, reason: "Summer vacation", status: "Pending", approvedBy: null, appliedOn: "2023-06-12" },
  { id: 5, employeeId: 5, employeeName: "Michael Wilson", type: "Sick Leave", from: "2023-06-05", to: "2023-06-06", days: 2, reason: "Fever", status: "Approved", approvedBy: "Jennifer Taylor", appliedOn: "2023-06-04" },
];

const performanceReviews = [
  { id: 1, employeeId: 1, employeeName: "John Doe", reviewPeriod: "2023 Q1", reviewDate: "2023-04-15", reviewer: "Lisa Johnson", status: "Completed", rating: 4.5, strengths: "Technical skills, problem-solving", areasToImprove: "Documentation, knowledge sharing" },
  { id: 2, employeeId: 2, employeeName: "Jane Smith", reviewPeriod: "2023 Q1", reviewDate: "2023-04-12", reviewer: "Michael Brown", status: "Completed", rating: 4.8, strengths: "Leadership, communication, organization", areasToImprove: "Work-life balance" },
  { id: 3, employeeId: 3, employeeName: "Robert Johnson", reviewPeriod: "2023 Q1", reviewDate: "2023-04-14", reviewer: "Sarah Williams", status: "Completed", rating: 4.2, strengths: "Product vision, stakeholder management", areasToImprove: "Technical depth, delegation" },
  { id: 4, employeeId: 4, employeeName: "Emily Davis", reviewPeriod: "2023 Q1", reviewDate: "2023-04-10", reviewer: "David Miller", status: "Completed", rating: 4.6, strengths: "Creativity, user empathy, attention to detail", areasToImprove: "Meeting deadlines" },
  { id: 5, employeeId: 1, employeeName: "John Doe", reviewPeriod: "2022 Q4", reviewDate: "2023-01-15", reviewer: "Lisa Johnson", status: "Completed", rating: 4.3, strengths: "Technical skills, problem-solving", areasToImprove: "Communication, documentation" },
];

const employeeGoals = [
  { id: 1, employeeId: 1, title: "Complete Advanced React Course", description: "Finish online course to improve React skills", startDate: "2023-05-01", targetDate: "2023-07-31", status: "In Progress", progress: 60 },
  { id: 2, employeeId: 1, title: "Mentor Junior Developer", description: "Provide mentorship to new team member", startDate: "2023-06-01", targetDate: "2023-12-31", status: "In Progress", progress: 25 },
  { id: 3, employeeId: 2, title: "Implement New Onboarding Process", description: "Design and roll out improved employee onboarding", startDate: "2023-04-15", targetDate: "2023-06-30", status: "In Progress", progress: 80 },
  { id: 4, employeeId: 3, title: "Product Roadmap 2023", description: "Finalize product strategy and roadmap for 2023", startDate: "2023-01-15", targetDate: "2023-03-31", status: "Completed", progress: 100 },
  { id: 5, employeeId: 4, title: "Design System Overhaul", description: "Update and standardize company design system", startDate: "2023-05-01", targetDate: "2023-08-31", status: "In Progress", progress: 40 },
];

const upcomingEvents = [
  { id: 1, title: "Team Building", date: "2023-06-30", time: "13:00", location: "Central Park", description: "Outdoor team building activities", participants: 25 },
  { id: 2, title: "Performance Review Cycle", date: "2023-07-15", time: "09:00", location: "Company-wide", description: "Q2 performance reviews begin", participants: 50 },
  { id: 3, title: "Leadership Training Workshop", date: "2023-07-05", time: "10:00", location: "Conference Room A", description: "Workshop for team leads and managers", participants: 15 },
  { id: 4, title: "New Hire Orientation", date: "2023-06-25", time: "09:30", location: "Training Room", description: "Orientation for new employees", participants: 8 },
];

const reportTemplates = [
  { id: 1, name: "Employee Headcount", description: "Current employee count by department", category: "Workforce" },
  { id: 2, name: "Attendance Summary", description: "Monthly attendance statistics", category: "Attendance" },
  { id: 3, name: "Leave Usage", description: "Leave utilization by department and type", category: "Leave" },
  { id: 4, name: "Turnover Rate", description: "Employee turnover statistics", category: "Workforce" },
  { id: 5, name: "Performance Distribution", description: "Distribution of performance ratings", category: "Performance" },
  { id: 6, name: "Salary Analysis", description: "Salary distribution by role and department", category: "Compensation" },
];

export default function HRMSDashboard() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredEmployees, setFilteredEmployees] = useState(employeesData);
  const [showModal, setShowModal] = useState(false);
  const [modalContent, setModalContent] = useState(null);
  const [currentDate] = useState(new Date().toISOString().split('T')[0]);
  
  // Tab-specific states
  const [employeeView, setEmployeeView] = useState('list');
  const [selectedEmployee, setSelectedEmployee] = useState(null);
  const [attendanceView, setAttendanceView] = useState('today');
  const [leaveView, setLeaveView] = useState('requests');
  const [performanceView, setPerformanceView] = useState('reviews');
  const [reportsView, setReportsView] = useState('templates');
  const [settingsView, setSettingsView] = useState('company');

  useEffect(() => {
    setFilteredEmployees(
      employeesData.filter(employee => 
        employee.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        employee.position.toLowerCase().includes(searchTerm.toLowerCase()) ||
        employee.department.toLowerCase().includes(searchTerm.toLowerCase())
      )
    );
  }, [searchTerm]);

  const openModal = (content) => {
    setModalContent(content);
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
    setModalContent(null);
  };

  const handleEmployeeSelect = (employee) => {
    setSelectedEmployee(employee);
    setEmployeeView('detail');
  };

  const handleAddEmployee = () => {
    openModal(
      <div className="w-full max-w-2xl">
        <div className="flex justify-between items-center mb-6">
          <h3 className="text-xl font-semibold">Add New Employee</h3>
          <button onClick={closeModal} className="text-gray-500 hover:text-gray-700">
            <X size={20} />
          </button>
        </div>
        
        <form className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
              <input type="text" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" placeholder="John Doe" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
              <input type="email" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" placeholder="john.doe@company.com" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
              <input type="tel" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" placeholder="+1 (555) 123-4567" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Position</label>
              <input type="text" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" placeholder="Software Engineer" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Department</label>
              <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                <option value="">Select Department</option>
                {departmentsData.map(dept => (
                  <option key={dept.id} value={dept.name}>{dept.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Manager</label>
              <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                <option value="">Select Manager</option>
                {employeesData.map(emp => (
                  <option key={emp.id} value={emp.name}>{emp.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Join Date</label>
              <input type="date" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Salary</label>
              <input type="number" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" placeholder="75000" />
            </div>
          </div>
          
          <div className="flex justify-end space-x-3 pt-4">
            <button 
              type="button" 
              onClick={closeModal}
              className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
            >
              Cancel
            </button>
            <button 
              type="button" 
              onClick={closeModal}
              className="px-4 py-2 bg-[#3a57e8] text-white rounded-md hover:bg-blue-700"
            >
              Add Employee
            </button>
          </div>
        </form>
      </div>
    );
  };

  const handleAddLeaveRequest = () => {
    openModal(
      <div className="w-full max-w-2xl">
        <div className="flex justify-between items-center mb-6">
          <h3 className="text-xl font-semibold">Apply for Leave</h3>
          <button onClick={closeModal} className="text-gray-500 hover:text-gray-700">
            <X size={20} />
          </button>
        </div>
        
        <form className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Employee</label>
              <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                <option value="">Select Employee</option>
                {employeesData.map(emp => (
                  <option key={emp.id} value={emp.id}>{emp.name}</option>
                ))}
              </select>
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Leave Type</label>
              <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                <option value="">Select Leave Type</option>
                {leaveTypes.map(type => (
                  <option key={type.id} value={type.name}>{type.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">From Date</label>
              <input type="date" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">To Date</label>
              <input type="date" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Reason</label>
              <textarea 
                className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" 
                rows="3"
                placeholder="Please provide a reason for your leave request"
              ></textarea>
            </div>
          </div>
          
          <div className="flex justify-end space-x-3 pt-4">
            <button 
              type="button" 
              onClick={closeModal}
              className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
            >
              Cancel
            </button>
            <button 
              type="button" 
              onClick={closeModal}
              className="px-4 py-2 bg-[#3a57e8] text-white rounded-md hover:bg-blue-700"
            >
              Submit Request
            </button>
          </div>
        </form>
      </div>
    );
  };

  const handleAddPerformanceReview = () => {
    openModal(
      <div className="w-full max-w-2xl">
        <div className="flex justify-between items-center mb-6">
          <h3 className="text-xl font-semibold">Create Performance Review</h3>
          <button onClick={closeModal} className="text-gray-500 hover:text-gray-700">
            <X size={20} />
          </button>
        </div>
        
        <form className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Employee</label>
              <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                <option value="">Select Employee</option>
                {employeesData.map(emp => (
                  <option key={emp.id} value={emp.id}>{emp.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Review Period</label>
              <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                <option value="">Select Period</option>
                <option value="2023 Q2">2023 Q2</option>
                <option value="2023 Q1">2023 Q1</option>
                <option value="2022 Q4">2022 Q4</option>
                <option value="2022 Q3">2022 Q3</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Review Date</label>
              <input type="date" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Overall Rating</label>
              <div className="flex space-x-4">
                {[1, 2, 3, 4, 5].map(rating => (
                  <label key={rating} className="flex items-center">
                    <input type="radio" name="rating" value={rating} className="mr-1" />
                    <span>{rating}</span>
                  </label>
                ))}
              </div>
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Strengths</label>
              <textarea 
                className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" 
                rows="3"
                placeholder="Employee's key strengths and achievements"
              ></textarea>
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Areas to Improve</label>
              <textarea 
                className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" 
                rows="3"
                placeholder="Areas where the employee can improve"
              ></textarea>
            </div>
          </div>
          
          <div className="flex justify-end space-x-3 pt-4">
            <button 
              type="button" 
              onClick={closeModal}
              className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
            >
              Cancel
            </button>
            <button 
              type="button" 
              onClick={closeModal}
              className="px-4 py-2 bg-[#3a57e8] text-white rounded-md hover:bg-blue-700"
            >
              Save Review
            </button>
          </div>
        </form>
      </div>
    );
  };

  return (
    <div className="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <div className="w-64 bg-white shadow-md">
        <div className="p-4 border-b">
          <h1 className="text-xl font-bold text-[#3a57e8]">HRMS Dashboard</h1>
        </div>
        <nav className="mt-6">
          <SidebarItem icon={<BarChart3 size={20} />} label="Dashboard" active={activeTab === 'dashboard'} onClick={() => setActiveTab('dashboard')} />
          <SidebarItem icon={<Users size={20} />} label="Employees" active={activeTab === 'employees'} onClick={() => setActiveTab('employees')} />
          <SidebarItem icon={<Clock size={20} />} label="Attendance" active={activeTab === 'attendance'} onClick={() => setActiveTab('attendance')} />
          <SidebarItem icon={<Calendar size={20} />} label="Leave Management" active={activeTab === 'leave'} onClick={() => setActiveTab('leave')} />
          <SidebarItem icon={<Award size={20} />} label="Performance" active={activeTab === 'performance'} onClick={() => setActiveTab('performance')} />
          <SidebarItem icon={<FileText size={20} />} label="Reports" active={activeTab === 'reports'} onClick={() => setActiveTab('reports')} />
          <SidebarItem icon={<Settings size={20} />} label="Settings" active={activeTab === 'settings'} onClick={() => setActiveTab('settings')} />
        </nav>
        <div className="absolute bottom-0 w-64 p-4 border-t">
          <button className="flex items-center text-gray-600 hover:text-red-600">
            <LogOut size={18} className="mr-2" />
            <span>Logout</span>
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 overflow-auto">
        {/* Header */}
        <header className="bg-white shadow-sm">
          <div className="flex items-center justify-between px-6 py-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
              <input
                type="text"
                placeholder="Search..."
                className="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#3a57e8] focus:border-transparent"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <div className="flex items-center space-x-4">
              <button className="relative p-2 text-gray-500 hover:text-[#3a57e8] focus:outline-none">
                <Bell size={20} />
                <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
              </button>
              <div className="flex items-center space-x-2">
                <img
                  src="https://randomuser.me/api/portraits/men/32.jpg"
                  alt="Admin"
                  className="w-8 h-8 rounded-full"
                />
                <span className="font-medium">Admin User</span>
              </div>
            </div>
          </div>
        </header>

        {/* Dashboard Content */}
        <main className="p-6">
          {/* Dashboard Tab */}
          {activeTab === 'dashboard' && (
            <div className="space-y-6">
              <h2 className="text-2xl font-bold text-[#1e293b]">HR Dashboard Overview</h2>
              
              {/* Stats Cards */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <StatCard 
                  title="Total Employees" 
                  value="50" 
                  change="+2" 
                  isPositive={true} 
                  icon={<Users className="text-[#3a57e8]" />} 
                />
                <StatCard 
                  title="Present Today" 
                  value="46" 
                  change="+1" 
                  isPositive={true} 
                  icon={<Clock className="text-[#10b981]" />} 
                />
                <StatCard 
                  title="On Leave" 
                  value="3" 
                  change="-1" 
                  isPositive={true} 
                  icon={<CalendarDays className="text-[#f59e0b]" />} 
                />
                <StatCard 
                  title="Open Positions" 
                  value="5" 
                  change="+2" 
                  isPositive={false} 
                  icon={<Briefcase className="text-[#ef4444]" />} 
                />
              </div>

              {/* Charts and Tables */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Attendance Chart */}
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold text-[#1e293b]">Weekly Attendance</h3>
                    <button className="text-[#3a57e8] text-sm" onClick={() => setActiveTab('attendance')}>View Details</button>
                  </div>
                  <div className="h-64">
                    <AttendanceChart data={attendanceData} />
                  </div>
                </div>

                {/* Leave Requests */}
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold text-[#1e293b]">Recent Leave Requests</h3>
                    <button className="text-[#3a57e8] text-sm" onClick={() => setActiveTab('leave')}>View All</button>
                  </div>
                  <div className="overflow-x-auto">
                    <table className="min-w-full">
                      <thead>
                        <tr className="border-b">
                          <th className="text-left py-3 px-2 text-sm font-medium text-gray-500">Employee</th>
                          <th className="text-left py-3 px-2 text-sm font-medium text-gray-500">Type</th>
                          <th className="text-left py-3 px-2 text-sm font-medium text-gray-500">Duration</th>
                          <th className="text-left py-3 px-2 text-sm font-medium text-gray-500">Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        {leaveRequests.slice(0, 3).map(request => (
                          <tr key={request.id} className="border-b hover:bg-gray-50">
                            <td className="py-3 px-2">{request.employeeName}</td>
                            <td className="py-3 px-2">{request.type}</td>
                            <td className="py-3 px-2">{new Date(request.from).toLocaleDateString()} - {new Date(request.to).toLocaleDateString()}</td>
                            <td className="py-3 px-2">
                              <span className={`px-2 py-1 rounded-full text-xs ${
                                request.status === 'Approved' ? 'bg-green-100 text-green-800' : 
                                request.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' : 
                                'bg-red-100 text-red-800'
                              }`}>
                                {request.status}
                              </span>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

              {/* Bottom Row */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Recent Employees */}
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold text-[#1e293b]">Recent Employees</h3>
                    <button className="text-[#3a57e8] text-sm" onClick={() => setActiveTab('employees')}>View All</button>
                  </div>
                  <div className="space-y-4">
                    {employeesData.slice(0, 3).map(employee => (
                      <div key={employee.id} className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
                        <div className="flex items-center space-x-3">
                          <img src={employee.avatar} alt={employee.name} className="w-10 h-10 rounded-full" />
                          <div>
                            <p className="font-medium">{employee.name}</p>
                            <p className="text-sm text-gray-500">{employee.position}</p>
                          </div>
                        </div>
                        <span className={`px-2 py-1 rounded-full text-xs ${
                          employee.status === 'Active' ? 'bg-green-100 text-green-800' : 
                          'bg-yellow-100 text-yellow-800'
                        }`}>
                          {employee.status}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Upcoming Events */}
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold text-[#1e293b]">Upcoming Events</h3>
                    <button className="text-[#3a57e8] text-sm">View Calendar</button>
                  </div>
                  <div className="space-y-4">
                    {upcomingEvents.slice(0, 3).map(event => (
                      <div key={event.id} className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
                        <div>
                          <p className="font-medium">{event.title}</p>
                          <p className="text-sm text-gray-500">{new Date(event.date).toLocaleDateString()} • {event.time} • {event.participants} participants</p>
                        </div>
                        <button className="text-[#3a57e8]">
                          <MoreHorizontal size={18} />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Employees Tab */}
          {activeTab === 'employees' && (
            <div className="space-y-6">
              {employeeView === 'list' && (
                <>
                  <div className="flex justify-between items-center">
                    <h2 className="text-2xl font-bold text-[#1e293b]">Employee Directory</h2>
                    <div className="flex space-x-3">
                      <button className="flex items-center space-x-1 px-3 py-1.5 border rounded-md text-gray-600 hover:bg-gray-50">
                        <Filter size={16} />
                        <span>Filter</span>
                      </button>
                      <button 
                        className="bg-[#3a57e8] text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center"
                        onClick={handleAddEmployee}
                      >
                        <Plus size={16} className="mr-1" />
                        Add Employee
                      </button>
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div className="overflow-x-auto">
                      <table className="min-w-full">
                        <thead>
                          <tr className="bg-gray-50 border-b">
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
                              <div className="flex items-center space-x-1">
                                <span>Employee</span>
                                <ArrowUpDown size={14} />
                              </div>
                            </th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
                              <div className="flex items-center space-x-1">
                                <span>Position</span>
                                <ArrowUpDown size={14} />
                              </div>
                            </th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
                              <div className="flex items-center space-x-1">
                                <span>Department</span>
                                <ArrowUpDown size={14} />
                              </div>
                            </th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Status</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredEmployees.map(employee => (
                            <tr key={employee.id} className="border-b hover:bg-gray-50">
                              <td className="py-3 px-4">
                                <div className="flex items-center space-x-3">
                                  <img src={employee.avatar} alt={employee.name} className="w-10 h-10 rounded-full" />
                                  <span className="font-medium">{employee.name}</span>
                                </div>
                              </td>
                              <td className="py-3 px-4">{employee.position}</td>
                              <td className="py-3 px-4">{employee.department}</td>
                              <td className="py-3 px-4">
                                <span className={`px-2 py-1 rounded-full text-xs ${
                                  employee.status === 'Active' ? 'bg-green-100 text-green-800' : 
                                  'bg-yellow-100 text-yellow-800'
                                }`}>
                                  {employee.status}
                                </span>
                              </td>
                              <td className="py-3 px-4">
                                <div className="flex space-x-2">
                                  <button 
                                    className="text-blue-600 hover:text-blue-800"
                                    onClick={() => handleEmployeeSelect(employee)}
                                  >
                                    <Eye size={16} />
                                  </button>
                                  <button className="text-green-600 hover:text-green-800">
                                    <Edit size={16} />
                                  </button>
                                  <button className="text-red-600 hover:text-red-800">
                                    <Trash2 size={16} />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                    <div className="px-4 py-3 border-t flex items-center justify-between">
                      <div className="text-sm text-gray-500">
                        Showing <span className="font-medium">1</span> to <span className="font-medium">{filteredEmployees.length}</span> of <span className="font-medium">{employeesData.length}</span> employees
                      </div>
                      <div className="flex space-x-1">
                        <button className="px-3 py-1 border rounded-md text-gray-600 hover:bg-gray-50">
                          <ChevronLeft size={16} />
                        </button>
                        <button className="px-3 py-1 border rounded-md bg-[#3a57e8] text-white">
                          1
                        </button>
                        <button className="px-3 py-1 border rounded-md text-gray-600 hover:bg-gray-50">
                          <ChevronRight size={16} />
                        </button>
                      </div>
                    </div>
                  </div>
                </>
              )}

              {employeeView === 'detail' && selectedEmployee && (
                <>
                  <div className="flex items-center mb-6">
                    <button 
                      className="flex items-center text-[#3a57e8] mr-4"
                      onClick={() => setEmployeeView('list')}
                    >
                      <ChevronLeft size={20} />
                      <span>Back to List</span>
                    </button>
                    <h2 className="text-2xl font-bold text-[#1e293b]">Employee Profile</h2>
                  </div>

                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* Employee Info Card */}
                    <div className="bg-white rounded-lg shadow-sm p-6">
                      <div className="flex flex-col items-center">
                        <img src={selectedEmployee.avatar} alt={selectedEmployee.name} className="w-24 h-24 rounded-full mb-4" />
                        <h3 className="text-xl font-semibold">{selectedEmployee.name}</h3>
                        <p className="text-gray-500">{selectedEmployee.position}</p>
                        <p className="text-sm text-gray-500 mt-1">{selectedEmployee.department}</p>
                        
                        <div className="w-full mt-6 space-y-4">
                          <div className="flex items-start">
                            <Mail className="text-gray-400 mr-3 mt-0.5" size={18} />
                            <div>
                              <p className="text-sm text-gray-500">Email</p>
                              <p>{selectedEmployee.email}</p>
                            </div>
                          </div>
                          <div className="flex items-start">
                            <Phone className="text-gray-400 mr-3 mt-0.5" size={18} />
                            <div>
                              <p className="text-sm text-gray-500">Phone</p>
                              <p>{selectedEmployee.phone}</p>
                            </div>
                          </div>
                          <div className="flex items-start">
                            <User className="text-gray-400 mr-3 mt-0.5" size={18} />
                            <div>
                              <p className="text-sm text-gray-500">Manager</p>
                              <p>{selectedEmployee.manager}</p>
                            </div>
                          </div>
                          <div className="flex items-start">
                            <CalendarIcon className="text-gray-400 mr-3 mt-0.5" size={18} />
                            <div>
                              <p className="text-sm text-gray-500">Join Date</p>
                              <p>{new Date(selectedEmployee.joinDate).toLocaleDateString()}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Employee Details */}
                    <div className="lg:col-span-2 space-y-6">
                      {/* Attendance Summary */}
                      <div className="bg-white rounded-lg shadow-sm p-6">
                        <h3 className="text-lg font-semibold mb-4">Attendance Summary</h3>
                        <div className="grid grid-cols-3 gap-4 mb-4">
                          <div className="bg-green-50 p-4 rounded-lg">
                            <p className="text-sm text-gray-500">Present</p>
                            <p className="text-2xl font-semibold text-green-600">21</p>
                            <p className="text-xs text-gray-500">This month</p>
                          </div>
                          <div className="bg-red-50 p-4 rounded-lg">
                            <p className="text-sm text-gray-500">Absent</p>
                            <p className="text-2xl font-semibold text-red-600">1</p>
                            <p className="text-xs text-gray-500">This month</p>
                          </div>
                          <div className="bg-yellow-50 p-4 rounded-lg">
                            <p className="text-sm text-gray-500">Late</p>
                            <p className="text-2xl font-semibold text-yellow-600">3</p>
                            <p className="text-xs text-gray-500">This month</p>
                          </div>
                        </div>
                        <button className="text-[#3a57e8] text-sm" onClick={() => { setActiveTab('attendance'); setAttendanceView('employee'); }}>
                          View Full Attendance History
                        </button>
                      </div>

                      {/* Leave Balance */}
                      <div className="bg-white rounded-lg shadow-sm p-6">
                        <h3 className="text-lg font-semibold mb-4">Leave Balance</h3>
                        <div className="grid grid-cols-3 gap-4 mb-4">
                          <div className="border p-4 rounded-lg">
                            <p className="text-sm text-gray-500">Annual Leave</p>
                            <p className="text-2xl font-semibold text-[#3a57e8]">
                              {leaveBalances.find(lb => lb.employeeId === selectedEmployee.id)?.annualLeave || 0}
                            </p>
                            <p className="text-xs text-gray-500">days remaining</p>
                          </div>
                          <div className="border p-4 rounded-lg">
                            <p className="text-sm text-gray-500">Sick Leave</p>
                            <p className="text-2xl font-semibold text-[#3a57e8]">
                              {leaveBalances.find(lb => lb.employeeId === selectedEmployee.id)?.sickLeave || 0}
                            </p>
                            <p className="text-xs text-gray-500">days remaining</p>
                          </div>
                          <div className="border p-4 rounded-lg">
                            <p className="text-sm text-gray-500">Personal Leave</p>
                            <p className="text-2xl font-semibold text-[#3a57e8]">
                              {leaveBalances.find(lb => lb.employeeId === selectedEmployee.id)?.personalLeave || 0}
                            </p>
                            <p className="text-xs text-gray-500">days remaining</p>
                          </div>
                        </div>
                        <button 
                          className="text-[#3a57e8] text-sm"
                          onClick={() => { setActiveTab('leave'); setLeaveView('employee'); }}
                        >
                          View Leave History
                        </button>
                      </div>

                      {/* Performance */}
                      <div className="bg-white rounded-lg shadow-sm p-6">
                        <h3 className="text-lg font-semibold mb-4">Recent Performance</h3>
                        {performanceReviews.filter(review => review.employeeId === selectedEmployee.id).length > 0 ? (
                          <div className="space-y-4">
                            {performanceReviews
                              .filter(review => review.employeeId === selectedEmployee.id)
                              .slice(0, 1)
                              .map(review => (
                                <div key={review.id} className="border p-4 rounded-lg">
                                  <div className="flex justify-between mb-2">
                                    <p className="font-medium">{review.reviewPeriod}</p>
                                    <div className="flex items-center">
                                      <span className="text-yellow-500 mr-1">★</span>
                                      <span>{review.rating}/5</span>
                                    </div>
                                  </div>
                                  <div className="grid grid-cols-2 gap-4 mt-4">
                                    <div>
                                      <p className="text-sm text-gray-500 mb-1">Strengths</p>
                                      <p className="text-sm">{review.strengths}</p>
                                    </div>
                                    <div>
                                      <p className="text-sm text-gray-500 mb-1">Areas to Improve</p>
                                      <p className="text-sm">{review.areasToImprove}</p>
                                    </div>
                                  </div>
                                </div>
                              ))}
                            <button 
                              className="text-[#3a57e8] text-sm"
                              onClick={() => { setActiveTab('performance'); setPerformanceView('employee'); }}
                            >
                              View All Performance Reviews
                            </button>
                          </div>
                        ) : (
                          <p className="text-gray-500">No performance reviews available.</p>
                        )}
                      </div>
                    </div>
                  </div>
                </>
              )}
            </div>
          )}

          {/* Attendance Tab */}
          {activeTab === 'attendance' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold text-[#1e293b]">Attendance Management</h2>
                <div className="flex space-x-3">
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      attendanceView === 'today' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setAttendanceView('today')}
                  >
                    Today
                  </button>
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      attendanceView === 'history' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setAttendanceView('history')}
                  >
                    History
                  </button>
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      attendanceView === 'report' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setAttendanceView('report')}
                  >
                    Reports
                  </button>
                </div>
              </div>

              {attendanceView === 'today' && (
                <>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <div className="bg-white rounded-lg shadow-sm p-6">
                      <h3 className="text-lg font-semibold mb-2">Today's Summary</h3>
                      <p className="text-gray-500 mb-4">{new Date().toLocaleDateString()}</p>
                      <div className="space-y-4">
                        <div className="flex justify-between items-center">
                          <span className="text-gray-600">Present</span>
                          <span className="font-semibold text-green-600">46</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-gray-600">Absent</span>
                          <span className="font-semibold text-red-600">1</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-gray-600">On Leave</span>
                          <span className="font-semibold text-yellow-600">3</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-gray-600">Late</span>
                          <span className="font-semibold text-orange-600">5</span>
                        </div>
                      </div>
                    </div>

                    <div className="bg-white rounded-lg shadow-sm p-6 md:col-span-2">
                      <h3 className="text-lg font-semibold mb-4">Quick Actions</h3>
                      <div className="grid grid-cols-2 gap-4">
                        <button className="flex flex-col items-center justify-center p-4 border rounded-lg hover:bg-gray-50">
                          <Clock className="text-[#3a57e8] mb-2" size={24} />
                          <span>Mark Attendance</span>
                        </button>
                        <button className="flex flex-col items-center justify-center p-4 border rounded-lg hover:bg-gray-50">
                          <Upload className="text-[#3a57e8] mb-2" size={24} />
                          <span>Import Attendance</span>
                        </button>
                        <button className="flex flex-col items-center justify-center p-4 border rounded-lg hover:bg-gray-50">
                          <Download className="text-[#3a57e8] mb-2" size={24} />
                          <span>Export Report</span>
                        </button>
                        <button className="flex flex-col items-center justify-center p-4 border rounded-lg hover:bg-gray-50">
                          <Settings className="text-[#3a57e8] mb-2" size={24} />
                          <span>Settings</span>
                        </button>
                      </div>
                    </div>
                  </div>

                  <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div className="flex justify-between items-center p-6 border-b">
                      <h3 className="text-lg font-semibold">Today's Attendance</h3>
                      <div className="flex items-center space-x-2">
                        <span className="text-sm text-gray-500">Date:</span>
                        <span className="font-medium">{new Date().toLocaleDateString()}</span>
                      </div>
                    </div>
                    <div className="overflow-x-auto">
                      <table className="min-w-full">
                        <thead>
                          <tr className="bg-gray-50 border-b">
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Employee</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Department</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Clock In</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Clock Out</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Status</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          {attendanceRecords
                            .filter(record => record.date === "2023-06-15")
                            .map(record => (
                              <tr key={record.id} className="border-b hover:bg-gray-50">
                                <td className="py-3 px-4">
                                  <div className="flex items-center space-x-3">
                                    <img 
                                      src={employeesData.find(emp => emp.id === record.employeeId)?.avatar || "https://randomuser.me/api/portraits/men/1.jpg"} 
                                      alt={record.employeeName} 
                                      className="w-8 h-8 rounded-full" 
                                    />
                                    <span>{record.employeeName}</span>
                                  </div>
                                </td>
                                <td className="py-3 px-4">
                                  {employeesData.find(emp => emp.id === record.employeeId)?.department || "N/A"}
                                </td>
                                <td className="py-3 px-4">
                                  {record.clockIn || "N/A"}
                                </td>
                                <td className="py-3 px-4">
                                  {record.clockOut || "N/A"}
                                </td>
                                <td className="py-3 px-4">
                                  <span className={`px-2 py-1 rounded-full text-xs ${
                                    record.status === 'Present' ? 'bg-green-100 text-green-800' : 
                                    record.status === 'Absent' ? 'bg-red-100 text-red-800' : 
                                    'bg-yellow-100 text-yellow-800'
                                  }`}>
                                    {record.status}
                                  </span>
                                </td>
                                <td className="py-3 px-4">
                                  <div className="flex space-x-2">
                                    <button className="text-blue-600 hover:text-blue-800">
                                      <Edit size={16} />
                                    </button>
                                    <button className="text-red-600 hover:text-red-800">
                                      <Trash2 size={16} />
                                    </button>
                                  </div>
                                </td>
                              </tr>
                            ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </>
              )}

              {attendanceView === 'history' && (
                <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                  <div className="p-6 border-b">
                    <div className="flex flex-wrap items-center justify-between gap-4">
                      <h3 className="text-lg font-semibold">Attendance History</h3>
                      <div className="flex flex-wrap items-center space-x-4">
                        <div className="flex items-center space-x-2">
                          <label className="text-sm text-gray-500">From:</label>
                          <input type="date" className="px-3 py-1.5 border rounded-md" defaultValue="2023-06-01" />
                        </div>
                        <div className="flex items-center space-x-2">
                          <label className="text-sm text-gray-500">To:</label>
                          <input type="date" className="px-3 py-1.5 border rounded-md" defaultValue="2023-06-15" />
                        </div>
                        <div className="flex items-center space-x-2">
                          <label className="text-sm text-gray-500">Employee:</label>
                          <select className="px-3 py-1.5 border rounded-md">
                            <option value="">All Employees</option>
                            {employeesData.map(emp => (
                              <option key={emp.id} value={emp.id}>{emp.name}</option>
                            ))}
                          </select>
                        </div>
                        <button className="px-4 py-2 bg-[#3a57e8] text-white rounded-md hover:bg-blue-700">
                          Filter
                        </button>
                      </div>
                    </div>
                  </div>
                  <div className="overflow-x-auto">
                    <table className="min-w-full">
                      <thead>
                        <tr className="bg-gray-50 border-b">
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Date</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Employee</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Clock In</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Clock Out</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Work Hours</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        {attendanceRecords.map(record => (
                          <tr key={record.id} className="border-b hover:bg-gray-50">
                            <td className="py-3 px-4">{new Date(record.date).toLocaleDateString()}</td>
                            <td className="py-3 px-4">
                              <div className="flex items-center space-x-3">
                                <img 
                                  src={employeesData.find(emp => emp.id === record.employeeId)?.avatar || "https://randomuser.me/api/portraits/men/1.jpg"} 
                                  alt={record.employeeName} 
                                  className="w-8 h-8 rounded-full" 
                                />
                                <span>{record.employeeName}</span>
                              </div>
                            </td>
                            <td className="py-3 px-4">{record.clockIn || "N/A"}</td>
                            <td className="py-3 px-4">{record.clockOut || "N/A"}</td>
                            <td className="py-3 px-4">{record.workHours}</td>
                            <td className="py-3 px-4">
                              <span className={`px-2 py-1 rounded-full text-xs ${
                                record.status === 'Present' ? 'bg-green-100 text-green-800' : 
                                record.status === 'Absent' ? 'bg-red-100 text-red-800' : 
                                'bg-yellow-100 text-yellow-800'
                              }`}>
                                {record.status}
                              </span>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                  <div className="px-4 py-3 border-t flex items-center justify-between">
                    <div className="text-sm text-gray-500">
                      Showing <span className="font-medium">1</span> to <span className="font-medium">{attendanceRecords.length}</span> of <span className="font-medium">{attendanceRecords.length}</span> records
                    </div>
                    <div className="flex space-x-1">
                      <button className="px-3 py-1 border rounded-md text-gray-600 hover:bg-gray-50">
                        <ChevronLeft size={16} />
                      </button>
                      <button className="px-3 py-1 border rounded-md bg-[#3a57e8] text-white">
                        1
                      </button>
                      <button className="px-3 py-1 border rounded-md text-gray-600 hover:bg-gray-50">
                        <ChevronRight size={16} />
                      </button>
                    </div>
                  </div>
                </div>
              )}

              {attendanceView === 'report' && (
                <div className="space-y-6">
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <h3 className="text-lg font-semibold mb-4">Generate Attendance Report</h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Report Type</label>
                        <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                          <option value="daily">Daily Attendance</option>
                          <option value="monthly">Monthly Summary</option>
                          <option value="employee">Employee Attendance</option>
                          <option value="department">Department Summary</option>
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">From Date</label>
                        <input type="date" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" defaultValue="2023-06-01" />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">To Date</label>
                        <input type="date" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]" defaultValue="2023-06-15" />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Department</label>
                        <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                          <option value="">All Departments</option>
                          {departmentsData.map(dept => (
                            <option key={dept.id} value={dept.id}>{dept.name}</option>
                          ))}
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Employee</label>
                        <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                          <option value="">All Employees</option>
                          {employeesData.map(emp => (
                            <option key={emp.id} value={emp.id}>{emp.name}</option>
                          ))}
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Format</label>
                        <select className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#3a57e8]">
                          <option value="pdf">PDF</option>
                          <option value="excel">Excel</option>
                          <option value="csv">CSV</option>
                        </select>
                      </div>
                    </div>
                    <div className="mt-6 flex justify-end">
                      <button className="px-4 py-2 bg-[#3a57e8] text-white rounded-md hover:bg-blue-700 flex items-center">
                        <Download size={16} className="mr-2" />
                        Generate Report
                      </button>
                    </div>
                  </div>

                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <h3 className="text-lg font-semibold mb-4">Recent Reports</h3>
                    <div className="overflow-x-auto">
                      <table className="min-w-full">
                        <thead>
                          <tr className="border-b">
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Report Name</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Generated On</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Type</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Format</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="py-3 px-4">Monthly Attendance - June 2023</td>
                            <td className="py-3 px-4">2023-06-15</td>
                            <td className="py-3 px-4">Monthly Summary</td>
                            <td className="py-3 px-4">PDF</td>
                            <td className="py-3 px-4">
                              <button className="text-[#3a57e8] hover:text-blue-700 flex items-center">
                                <Download size={16} className="mr-1" />
                                Download
                              </button>
                            </td>
                          </tr>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="py-3 px-4">Engineering Department - May 2023</td>
                            <td className="py-3 px-4">2023-06-02</td>
                            <td className="py-3 px-4">Department Summary</td>
                            <td className="py-3 px-4">Excel</td>
                            <td className="py-3 px-4">
                              <button className="text-[#3a57e8] hover:text-blue-700 flex items-center">
                                <Download size={16} className="mr-1" />
                                Download
                              </button>
                            </td>
                          </tr>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="py-3 px-4">John Doe - Q2 2023</td>
                            <td className="py-3 px-4">2023-05-28</td>
                            <td className="py-3 px-4">Employee Attendance</td>
                            <td className="py-3 px-4">PDF</td>
                            <td className="py-3 px-4">
                              <button className="text-[#3a57e8] hover:text-blue-700 flex items-center">
                                <Download size={16} className="mr-1" />
                                Download
                              </button>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Leave Management Tab */}
          {activeTab === 'leave' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold text-[#1e293b]">Leave Management</h2>
                <div className="flex space-x-3">
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      leaveView === 'requests' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setLeaveView('requests')}
                  >
                    Requests
                  </button>
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      leaveView === 'calendar' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setLeaveView('calendar')}
                  >
                    Calendar
                  </button>
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      leaveView === 'types' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setLeaveView('types')}
                  >
                    Leave Types
                  </button>
                  <button 
                    className="bg-[#3a57e8] text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center"
                    onClick={handleAddLeaveRequest}
                  >
                    <Plus size={16} className="mr-1" />
                    Apply Leave
                  </button>
                </div>
              </div>

              {leaveView === 'requests' && (
                <>
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center">
                      <div className="p-3 bg-blue-100 rounded-full mb-3">
                        <Calendar className="text-[#3a57e8]" size={24} />
                      </div>
                      <p className="text-2xl font-bold">12</p>
                      <p className="text-gray-500">Total Requests</p>
                    </div>
                    <div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center">
                      <div className="p-3 bg-green-100 rounded-full mb-3">
                        <CheckCircle2 className="text-green-600" size={24} />
                      </div>
                      <p className="text-2xl font-bold">7</p>
                      <p className="text-gray-500">Approved</p>
                    </div>
                    <div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center">
                      <div className="p-3 bg-yellow-100 rounded-full mb-3">
                        <Clock className="text-yellow-600" size={24} />
                      </div>
                      <p className="text-2xl font-bold">3</p>
                      <p className="text-gray-500">Pending</p>
                    </div>
                    <div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center">
                      <div className="p-3 bg-red-100 rounded-full mb-3">
                        <XCircle className="text-red-600" size={24} />
                      </div>
                      <p className="text-2xl font-bold">2</p>
                      <p className="text-gray-500">Rejected</p>
                    </div>
                  </div>

                  <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div className="p-6 border-b">
                      <div className="flex flex-wrap items-center justify-between gap-4">
                        <h3 className="text-lg font-semibold">Leave Requests</h3>
                        <div className="flex flex-wrap items-center space-x-4">
                          <div className="flex items-center space-x-2">
                            <label className="text-sm text-gray-500">Status:</label>
                            <select className="px-3 py-1.5 border rounded-md">
                              <option value="">All Status</option>
                              <option value="approved">Approved</option>
                              <option value="pending">Pending</option>
                              <option value="rejected">Rejected</option>
                            </select>
                          </div>
                          <div className="flex items-center space-x-2">
                            <label className="text-sm text-gray-500">Type:</label>
                            <select className="px-3 py-1.5 border rounded-md">
                              <option value="">All Types</option>
                              {leaveTypes.map(type => (
                                <option key={type.id} value={type.name}>{type.name}</option>
                              ))}
                            </select>
                          </div>
                          <button className="px-4 py-2 bg-[#3a57e8] text-white rounded-md hover:bg-blue-700">
                            Filter
                          </button>
                        </div>
                      </div>
                    </div>
                    <div className="overflow-x-auto">
                      <table className="min-w-full">
                        <thead>
                          <tr className="bg-gray-50 border-b">
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Employee</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Leave Type</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">From</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">To</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Days</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Applied On</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Status</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          {leaveRequests.map(request => (
                            <tr key={request.id} className="border-b hover:bg-gray-50">
                              <td className="py-3 px-4">
                                <div className="flex items-center space-x-3">
                                  <img 
                                    src={employeesData.find(emp => emp.id === request.employeeId)?.avatar || "https://randomuser.me/api/portraits/men/1.jpg"} 
                                    alt={request.employeeName} 
                                    className="w-8 h-8 rounded-full" 
                                  />
                                  <span>{request.employeeName}</span>
                                </div>
                              </td>
                              <td className="py-3 px-4">{request.type}</td>
                              <td className="py-3 px-4">{new Date(request.from).toLocaleDateString()}</td>
                              <td className="py-3 px-4">{new Date(request.to).toLocaleDateString()}</td>
                              <td className="py-3 px-4">{request.days}</td>
                              <td className="py-3 px-4">{new Date(request.appliedOn).toLocaleDateString()}</td>
                              <td className="py-3 px-4">
                                <span className={`px-2 py-1 rounded-full text-xs ${
                                  request.status === 'Approved' ? 'bg-green-100 text-green-800' : 
                                  request.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' : 
                                  'bg-red-100 text-red-800'
                                }`}>
                                  {request.status}
                                </span>
                              </td>
                              <td className="py-3 px-4">
                                <div className="flex space-x-2">
                                  {request.status === 'Pending' && (
                                    <>
                                      <button className="text-green-600 hover:text-green-800">
                                        <Check size={16} />
                                      </button>
                                      <button className="text-red-600 hover:text-red-800">
                                        <X size={16} />
                                      </button>
                                    </>
                                  )}
                                  <button className="text-blue-600 hover:text-blue-800">
                                    <Eye size={16} />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                    <div className="px-4 py-3 border-t flex items-center justify-between">
                      <div className="text-sm text-gray-500">
                        Showing <span className="font-medium">1</span> to <span className="font-medium">{leaveRequests.length}</span> of <span className="font-medium">{leaveRequests.length}</span> requests
                      </div>
                      <div className="flex space-x-1">
                        <button className="px-3 py-1 border rounded-md text-gray-600 hover:bg-gray-50">
                          <ChevronLeft size={16} />
                        </button>
                        <button className="px-3 py-1 border rounded-md bg-[#3a57e8] text-white">
                          1
                        </button>
                        <button className="px-3 py-1 border rounded-md text-gray-600 hover:bg-gray-50">
                          <ChevronRight size={16} />
                        </button>
                      </div>
                    </div>
                  </div>
                </>
              )}

              {leaveView === 'calendar' && (
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-6">
                    <h3 className="text-lg font-semibold">Leave Calendar</h3>
                    <div className="flex items-center space-x-2">
                      <button className="p-1 border rounded-md">
                        <ChevronLeft size={16} />
                      </button>
                      <span className="font-medium">June 2023</span>
                      <button className="p-1 border rounded-md">
                        <ChevronRight size={16} />
                      </button>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-7 gap-2">
                    {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
                      <div key={day} className="text-center font-medium py-2 border-b">
                        {day}
                      </div>
                    ))}
                    
                    {/* Calendar days - first row (empty days + days 1-3) */}
                    <div className="h-24 p-1 border border-gray-200"></div>
                    <div className="h-24 p-1 border border-gray-200"></div>
                    <div className="h-24 p-1 border border-gray-200"></div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">1</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">2</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">3</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">4</div>
                    </div>
                    
                    {/* Calendar days - second row (days 5-11) */}
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">5</div>
                      <div className="mt-1 text-xs bg-yellow-100 text-yellow-800 p-1 rounded">
                        Michael - Sick Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">6</div>
                      <div className="mt-1 text-xs bg-yellow-100 text-yellow-800 p-1 rounded">
                        Michael - Sick Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">7</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">8</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">9</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">10</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">11</div>
                    </div>
                    
                    {/* Calendar days - third row (days 12-18) */}
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">12</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">13</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">14</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">15</div>
                      <div className="mt-1 text-xs bg-green-100 text-green-800 p-1 rounded">
                        Jane - Sick Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">16</div>
                      <div className="mt-1 text-xs bg-green-100 text-green-800 p-1 rounded">
                        Jane - Sick Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">17</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">18</div>
                      <div className="mt-1 text-xs bg-green-100 text-green-800 p-1 rounded">
                        Emily - Personal
                      </div>
                    </div>
                    
                    {/* Calendar days - fourth row (days 19-25) */}
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">19</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">20</div>
                      <div className="mt-1 text-xs bg-yellow-100 text-yellow-800 p-1 rounded">
                        Robert - Annual Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">21</div>
                      <div className="mt-1 text-xs bg-yellow-100 text-yellow-800 p-1 rounded">
                        Robert - Annual Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">22</div>
                      <div className="mt-1 text-xs bg-yellow-100 text-yellow-800 p-1 rounded">
                        Robert - Annual Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">23</div>
                      <div className="mt-1 text-xs bg-yellow-100 text-yellow-800 p-1 rounded">
                        Robert - Annual Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">24</div>
                      <div className="mt-1 text-xs bg-yellow-100 text-yellow-800 p-1 rounded">
                        Robert - Annual Leave
                      </div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">25</div>
                      <div className="mt-1 text-xs bg-yellow-100 text-yellow-800 p-1 rounded">
                        Robert - Annual Leave
                      </div>
                    </div>
                    
                    {/* Calendar days - fifth row (days 26-30) */}
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">26</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">27</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">28</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">29</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200">
                      <div className="text-sm font-medium">30</div>
                    </div>
                    <div className="h-24 p-1 border border-gray-200"></div>
                    <div className="h-24 p-1 border border-gray-200"></div>
                  </div>
                  
                  <div className="mt-6">
                    <h4 className="font-medium mb-2">Legend</h4>
                    <div className="flex space-x-4">
                      <div className="flex items-center">
                        <div className="w-4 h-4 bg-green-100 rounded mr-2"></div>
                        <span className="text-sm">Approved</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-4 h-4 bg-yellow-100 rounded mr-2"></div>
                        <span className="text-sm">Pending</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-4 h-4 bg-red-100 rounded mr-2"></div>
                        <span className="text-sm">Rejected</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {leaveView === 'types' && (
                <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                  <div className="flex justify-between items-center p-6 border-b">
                    <h3 className="text-lg font-semibold">Leave Types</h3>
                    <button className="bg-[#3a57e8] text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center">
                      <Plus size={16} className="mr-1" />
                      Add Leave Type
                    </button>
                  </div>
                  <div className="overflow-x-auto">
                    <table className="min-w-full">
                      <thead>
                        <tr className="bg-gray-50 border-b">
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Name</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Days Allowed</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Carry Forward</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Description</th>
                          <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {leaveTypes.map(type => (
                          <tr key={type.id} className="border-b hover:bg-gray-50">
                            <td className="py-3 px-4 font-medium">{type.name}</td>
                            <td className="py-3 px-4">{type.daysAllowed}</td>
                            <td className="py-3 px-4">
                              {type.carryForward ? (
                                <span className="text-green-600">Yes</span>
                              ) : (
                                <span className="text-red-600">No</span>
                              )}
                            </td>
                            <td className="py-3 px-4">{type.description}</td>
                            <td className="py-3 px-4">
                              <div className="flex space-x-2">
                                <button className="text-blue-600 hover:text-blue-800">
                                  <Edit size={16} />
                                </button>
                                <button className="text-red-600 hover:text-red-800">
                                  <Trash2 size={16} />
                                </button>
                              </div>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Performance Tab */}
          {activeTab === 'performance' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold text-[#1e293b]">Performance Management</h2>
                <div className="flex space-x-3">
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      performanceView === 'reviews' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setPerformanceView('reviews')}
                  >
                    Reviews
                  </button>
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      performanceView === 'goals' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setPerformanceView('goals')}
                  >
                    Goals
                  </button>
                  <button 
                    className="bg-[#3a57e8] text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center"
                    onClick={handleAddPerformanceReview}
                  >
                    <Plus size={16} className="mr-1" />
                    New Review
                  </button>
                </div>
              </div>

              {performanceView === 'reviews' && (
                <>
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div className="bg-white rounded-lg shadow-sm p-6">
                      <div className="flex items-center justify-between mb-4">
                        <h3 className="font-semibold">Rating Distribution</h3>
                        <div className="text-sm text-gray-500">Q1 2023</div>
                      </div>
                      <div className="space-y-3">
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>5 Stars</span>
                            <span>20%</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div className="bg-[#3a57e8] h-2 rounded-full" style={{ width: '20%' }}></div>
                          </div>
                        </div>
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>4 Stars</span>
                            <span>45%</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div className="bg-[#3a57e8] h-2 rounded-full" style={{ width: '45%' }}></div>
                          </div>
                        </div>
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>3 Stars</span>
                            <span>25%</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div className="bg-[#3a57e8] h-2 rounded-full" style={{ width: '25%' }}></div>
                          </div>
                        </div>
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>2 Stars</span>
                            <span>8%</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div className="bg-[#3a57e8] h-2 rounded-full" style={{ width: '8%' }}></div>
                          </div>
                        </div>
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>1 Star</span>
                            <span>2%</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div className="bg-[#3a57e8] h-2 rounded-full" style={{ width: '2%' }}></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <div className="bg-white rounded-lg shadow-sm p-6 md:col-span-3">
                      <div className="flex items-center justify-between mb-4">
                        <h3 className="font-semibold">Department Performance</h3>
                        <div className="text-sm text-gray-500">Q1 2023</div>
                      </div>
                      <div className="overflow-x-auto">
                        <table className="min-w-full">
                          <thead>
                            <tr className="border-b">
                              <th className="text-left py-2 px-3 text-sm font-medium text-gray-500">Department</th>
                              <th className="text-left py-2 px-3 text-sm font-medium text-gray-500">Avg. Rating</th>
                              <th className="text-left py-2 px-3 text-sm font-medium text-gray-500">Top Performer</th>
                              <th className="text-left py-2 px-3 text-sm font-medium text-gray-500">Trend</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr className="border-b">
                              <td className="py-2 px-3">Engineering</td>
                              <td className="py-2 px-3">
                                <div className="flex items-center">
                                  <span className="text-yellow-500 mr-1">★</span>
                                  <span>4.3</span>
                                </div>
                              </td>
                              <td className="py-2 px-3">John Doe</td>
                              <td className="py-2 px-3">
                                <span className="text-green-600 flex items-center">
                                  <ArrowUpRight size={16} className="mr-1" />
                                  +0.2
                                </span>
                              </td>
                            </tr>
                            <tr className="border-b">
                              <td className="py-2 px-3">Human Resources</td>
                              <td className="py-2 px-3">
                                <div className="flex items-center">
                                  <span className="text-yellow-500 mr-1">★</span>
                                  <span>4.7</span>
                                </div>
                              </td>
                              <td className="py-2 px-3">Jane Smith</td>
                              <td className="py-2 px-3">
                                <span className="text-green-600 flex items-center">
                                  <ArrowUpRight size={16} className="mr-1" />
                                  +0.3
                                </span>
                              </td>
                            </tr>
                            <tr className="border-b">
                              <td className="py-2 px-3">Product</td>
                              <td className="py-2 px-3">
                                <div className="flex items-center">
                                  <span className="text-yellow-500 mr-1">★</span>
                                  <span>4.1</span>
                                </div>
                              </td>
                              <td className="py-2 px-3">Robert Johnson</td>
                              <td className="py-2 px-3">
                                <span className="text-red-600 flex items-center">
                                  <ArrowDownRight size={16} className="mr-1" />
                                  -0.1
                                </span>
                              </td>
                            </tr>
                            <tr className="border-b">
                              <td className="py-2 px-3">Design</td>
                              <td className="py-2 px-3">
                                <div className="flex items-center">
                                  <span className="text-yellow-500 mr-1">★</span>
                                  <span>4.5</span>
                                </div>
                              </td>
                              <td className="py-2 px-3">Emily Davis</td>
                              <td className="py-2 px-3">
                                <span className="text-green-600 flex items-center">
                                  <ArrowUpRight size={16} className="mr-1" />
                                  +0.2
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>

                  <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div className="p-6 border-b">
                      <div className="flex flex-wrap items-center justify-between gap-4">
                        <h3 className="text-lg font-semibold">Performance Reviews</h3>
                        <div className="flex flex-wrap items-center space-x-4">
                          <div className="flex items-center space-x-2">
                            <label className="text-sm text-gray-500">Period:</label>
                            <select className="px-3 py-1.5 border rounded-md">
                              <option value="2023-q1">2023 Q1</option>
                              <option value="2022-q4">2022 Q4</option>
                              <option value="2022-q3">2022 Q3</option>
                            </select>
                          </div>
                          <div className="flex items-center space-x-2">
                            <label className="text-sm text-gray-500">Department:</label>
                            <select className="px-3 py-1.5 border rounded-md">
                              <option value="">All Departments</option>
                              {departmentsData.map(dept => (
                                <option key={dept.id} value={dept.id}>{dept.name}</option>
                              ))}
                            </select>
                          </div>
                          <button className="px-4 py-2 bg-[#3a57e8] text-white rounded-md hover:bg-blue-700">
                            Filter
                          </button>
                        </div>
                      </div>
                    </div>
                    <div className="overflow-x-auto">
                      <table className="min-w-full">
                        <thead>
                          <tr className="bg-gray-50 border-b">
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Employee</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Period</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Review Date</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Reviewer</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Rating</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Status</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          {performanceReviews.map(review => (
                            <tr key={review.id} className="border-b hover:bg-gray-50">
                              <td className="py-3 px-4">
                                <div className="flex items-center space-x-3">
                                  <img 
                                    src={employeesData.find(emp => emp.id === review.employeeId)?.avatar || "https://randomuser.me/api/portraits/men/1.jpg"} 
                                    alt={review.employeeName} 
                                    className="w-8 h-8 rounded-full" 
                                  />
                                  <span>{review.employeeName}</span>
                                </div>
                              </td>
                              <td className="py-3 px-4">{review.reviewPeriod}</td>
                              <td className="py-3 px-4">{new Date(review.reviewDate).toLocaleDateString()}</td>
                              <td className="py-3 px-4">{review.reviewer}</td>
                              <td className="py-3 px-4">
                                <div className="flex items-center">
                                  <span className="text-yellow-500 mr-1">★</span>
                                  <span>{review.rating}/5</span>
                                </div>
                              </td>
                              <td className="py-3 px-4">
                                <span className={`px-2 py-1 rounded-full text-xs ${
                                  review.status === 'Completed' ? 'bg-green-100 text-green-800' : 
                                  review.status === 'In Progress' ? 'bg-yellow-100 text-yellow-800' : 
                                  'bg-blue-100 text-blue-800'
                                }`}>
                                  {review.status}
                                </span>
                              </td>
                              <td className="py-3 px-4">
                                <div className="flex space-x-2">
                                  <button className="text-blue-600 hover:text-blue-800">
                                    <Eye size={16} />
                                  </button>
                                  <button className="text-green-600 hover:text-green-800">
                                    <Edit size={16} />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                    <div className="px-4 py-3 border-t flex items-center justify-between">
                      <div className="text-sm text-gray-500">
                        Showing <span className="font-medium">1</span> to <span className="font-medium">{performanceReviews.length}</span> of <span className="font-medium">{performanceReviews.length}</span> reviews
                      </div>
                      <div className="flex space-x-1">
                        <button className="px-3 py-1 border rounded-md text-gray-600 hover:bg-gray-50">
                          <ChevronLeft size={16} />
                        </button>
                        <button className="px-3 py-1 border rounded-md bg-[#3a57e8] text-white">
                          1
                        </button>
                        <button className="px-3 py-1 border rounded-md text-gray-600 hover:bg-gray-50">
                          <ChevronRight size={16} />
                        </button>
                      </div>
                    </div>
                  </div>
                </>
              )}

              {performanceView === 'goals' && (
                <>
                  <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div className="flex justify-between items-center p-6 border-b">
                      <h3 className="text-lg font-semibold">Employee Goals</h3>
                      <button className="bg-[#3a57e8] text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center">
                        <Plus size={16} className="mr-1" />
                        Add Goal
                      </button>
                    </div>
                    <div className="p-6 border-b">
                      <div className="flex flex-wrap items-center space-x-4">
                        <div className="flex items-center space-x-2">
                          <label className="text-sm text-gray-500">Employee:</label>
                          <select className="px-3 py-1.5 border rounded-md">
                            <option value="">All Employees</option>
                            {employeesData.map(emp => (
                              <option key={emp.id} value={emp.id}>{emp.name}</option>
                            ))}
                          </select>
                        </div>
                        <div className="flex items-center space-x-2">
                          <label className="text-sm text-gray-500">Status:</label>
                          <select className="px-3 py-1.5 border rounded-md">
                            <option value="">All Status</option>
                            <option value="completed">Completed</option>
                            <option value="in-progress">In Progress</option>
                            <option value="not-started">Not Started</option>
                          </select>
                        </div>
                        <button className="px-4 py-2 bg-[#3a57e8] text-white rounded-md hover:bg-blue-700">
                          Filter
                        </button>
                      </div>
                    </div>
                    <div className="overflow-x-auto">
                      <table className="min-w-full">
                        <thead>
                          <tr className="bg-gray-50 border-b">
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Employee</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Goal</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Start Date</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Target Date</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Progress</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Status</th>
                            <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          {employeeGoals.map(goal => (
                            <tr key={goal.id} className="border-b hover:bg-gray-50">
                              <td className="py-3 px-4">
                                <div className="flex items-center space-x-3">
                                  <img 
                                    src={employeesData.find(emp => emp.id === goal.employeeId)?.avatar || "https://randomuser.me/api/portraits/men/1.jpg"} 
                                    alt={employeesData.find(emp => emp.id === goal.employeeId)?.name} 
                                    className="w-8 h-8 rounded-full" 
                                  />
                                  <span>{employeesData.find(emp => emp.id === goal.employeeId)?.name}</span>
                                </div>
                              </td>
                              <td className="py-3 px-4">
                                <div>
                                  <p className="font-medium">{goal.title}</p>
                                  <p className="text-sm text-gray-500">{goal.description}</p>
                                </div>
                              </td>
                              <td className="py-3 px-4">{new Date(goal.startDate).toLocaleDateString()}</td>
                              <td className="py-3 px-4">{new Date(goal.targetDate).toLocaleDateString()}</td>
                              <td className="py-3 px-4">
                                <div className="flex items-center">
                                  <div className="w-full bg-gray-200 rounded-full h-2 mr-2">
                                    <div 
                                      className={`h-2 rounded-full ${
                                        goal.status === 'Completed' ? 'bg-green-500' : 'bg-[#3a57e8]'
                                      }`} 
                                      style={{ width: `${goal.progress}%` }}
                                    ></div>
                                  </div>
                                  <span className="text-sm">{goal.progress}%</span>
                                </div>
                              </td>
                              <td className="py-3 px-4">
                                <span className={`px-2 py-1 rounded-full text-xs ${
                                  goal.status === 'Completed' ? 'bg-green-100 text-green-800' : 
                                  goal.status === 'In Progress' ? 'bg-yellow-100 text-yellow-800' : 
                                  'bg-blue-100 text-blue-800'
                                }`}>
                                  {goal.status}
                                </span>
                              </td>
                              <td className="py-3 px-4">
                                <div className="flex space-x-2">
                                  <button className="text-blue-600 hover:text-blue-800">
                                    <Eye size={16} />
                                  </button>
                                  <button className="text-green-600 hover:text-green-800">
                                    <Edit size={16} />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </>
              )}
            </div>
          )}

          {/* Reports Tab */}
          {activeTab === 'reports' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold text-[#1e293b]">Reports</h2>
                <div className="flex space-x-3">
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      reportsView === 'templates' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setReportsView('templates')}
                  >
                    Templates
                  </button>
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      reportsView === 'custom' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setReportsView('custom')}
                  >
                    Custom Reports
                  </button>
                  <button 
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      reportsView === 'scheduled' ? 'bg-[#3a57e8] text-white' : 'bg-white text-gray-700 border'
                    }`}
                    onClick={() => setReportsView('scheduled')}
                  >
                    Scheduled
                  </button>
                </div>
              </div>

              {reportsView === 'templates' && (
                <>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="bg-white rounded-lg shadow-sm p-6">
                      <h3 className="text-lg font-semibold mb-4">Report Categories</h3>
                      <div className="space-y-2">
                        <button className="w-full text-left px-4 py-2 rounded-lg bg-[#f0f5ff] text-[#3a57e8] font-medium">
                          All Categories
                        </button>
                        <button className="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100">
                          Workforce
                        </button>
                        <button className="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100">
                          Attendance
                        </button>
                        <button className="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100">
                          Leave
                        </button><ant_artifact identifier="HRMSDashboard1" title="HRMS Dashboard Code Integration">
import { useState, useEffect } from 'react';
import { 
  Users, 
  Calendar, 
  BarChart3, 
  FileText, 
  Settings, 
  Bell, 
  Search, 
  UserCircle,
  Clock,
  CalendarDays,
  Award,
  Briefcase,
  ArrowUpRight,
  ArrowDownRight,
  MoreHorizontal
} from 'lucide-react';

// Mock data
const employeesData = [
  { id: 1, name: "John Doe", position: "Software Engineer", department: "Engineering", status: "Active", avatar: "https://randomuser.me/api/portraits/men/1.jpg" },
  { id: 2, name: "Jane Smith", position: "HR Manager", department: "Human Resources", status: "Active", avatar: "https://randomuser.me/api/portraits/women/2.jpg" },
  { id: 3, name: "Robert Johnson", position: "Product Manager", department: "Product", status: "On Leave", avatar: "https://randomuser.me/api/portraits/men/3.jpg" },
  { id: 4, name: "Emily Davis", position: "UX Designer", department: "Design", status: "Active", avatar: "https://randomuser.me/api/portraits/women/4.jpg" },
  { id: 5, name: "Michael Wilson", position: "Marketing Specialist", department: "Marketing", status: "Active", avatar: "https://randomuser.me/api/portraits/men/5.jpg" },
];

const attendanceData = [
  { day: "Mon", present: 45, absent: 3, leave: 2 },
  { day: "Tue", present: 47, absent: 2, leave: 1 },
  { day: "Wed", present: 44, absent: 4, leave: 2 },
  { day: "Thu", present: 46, absent: 2, leave: 2 },
  { day: "Fri", present: 43, absent: 5, leave: 2 },
];

const leaveRequests = [
  { id: 1, employee: "Jane Smith", type: "Sick Leave", from: "2023-06-15", to: "2023-06-16", status: "Approved" },
  { id: 2, employee: "Robert Johnson", type: "Vacation", from: "2023-06-20", to: "2023-06-25", status: "Pending" },
  { id: 3, employee: "Emily Davis", type: "Personal", from: "2023-06-18", to: "2023-06-18", status: "Approved" },
];

const upcomingEvents = [
  { id: 1, title: "Team Building", date: "2023-06-30", participants: 25 },
  { id: 2, title: "Performance Review", date: "2023-07-15", participants: 50 },
  { id: 3, title: "Training Workshop", date: "2023-07-05", participants: 15 },
];

export default function HRMSDashboard() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredEmployees, setFilteredEmployees] = useState(employeesData);

  useEffect(() => {
    setFilteredEmployees(
      employeesData.filter(employee => 
        employee.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        employee.position.toLowerCase().includes(searchTerm.toLowerCase()) ||
        employee.department.toLowerCase().includes(searchTerm.toLowerCase())
      )
    );
  }, [searchTerm]);

  return (
    <div className="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <div className="w-64 bg-white shadow-md">
        <div className="p-4 border-b">
          <h1 className="text-xl font-bold text-[#3a57e8]">HRMS Dashboard</h1>
        </div>
        <nav className="mt-6">
          <SidebarItem icon={<BarChart3 size={20} />} label="Dashboard" active={activeTab === 'dashboard'} onClick={() => setActiveTab('dashboard')} />
          <SidebarItem icon={<Users size={20} />} label="Employees" active={activeTab === 'employees'} onClick={() => setActiveTab('employees')} />
          <SidebarItem icon={<Clock size={20} />} label="Attendance" active={activeTab === 'attendance'} onClick={() => setActiveTab('attendance')} />
          <SidebarItem icon={<Calendar size={20} />} label="Leave Management" active={activeTab === 'leave'} onClick={() => setActiveTab('leave')} />
          <SidebarItem icon={<Award size={20} />} label="Performance" active={activeTab === 'performance'} onClick={() => setActiveTab('performance')} />
          <SidebarItem icon={<FileText size={20} />} label="Reports" active={activeTab === 'reports'} onClick={() => setActiveTab('reports')} />
          <SidebarItem icon={<Settings size={20} />} label="Settings" active={activeTab === 'settings'} onClick={() => setActiveTab('settings')} />
        </nav>
      </div>

      {/* Main Content */}
      <div className="flex-1 overflow-auto">
        {/* Header */}
        <header className="bg-white shadow-sm">
          <div className="flex items-center justify-between px-6 py-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
              <input
                type="text"
                placeholder="Search..."
                className="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#3a57e8] focus:border-transparent"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <div className="flex items-center space-x-4">
              <button className="relative p-2 text-gray-500 hover:text-[#3a57e8] focus:outline-none">
                <Bell size={20} />
                <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
              </button>
              <div className="flex items-center space-x-2">
                <img
                  src="https://randomuser.me/api/portraits/men/32.jpg"
                  alt="Admin"
                  className="w-8 h-8 rounded-full"
                />
                <span className="font-medium">Admin User</span>
              </div>
            </div>
          </div>
        </header>

        {/* Dashboard Content */}
        <main className="p-6">
          {activeTab === 'dashboard' && (
            <div className="space-y-6">
              <h2 className="text-2xl font-bold text-[#1e293b]">HR Dashboard Overview</h2>
              
              {/* Stats Cards */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <StatCard 
                  title="Total Employees" 
                  value="50" 
                  change="+2" 
                  isPositive={true} 
                  icon={<Users className="text-[#3a57e8]" />} 
                />
                <StatCard 
                  title="Present Today" 
                  value="46" 
                  change="+1" 
                  isPositive={true} 
                  icon={<Clock className="text-[#10b981]" />} 
                />
                <StatCard 
                  title="On Leave" 
                  value="3" 
                  change="-1" 
                  isPositive={true} 
                  icon={<CalendarDays className="text-[#f59e0b]" />} 
                />
                <StatCard 
                  title="Open Positions" 
                  value="5" 
                  change="+2" 
                  isPositive={false} 
                  icon={<Briefcase className="text-[#ef4444]" />} 
                />
              </div>

              {/* Charts and Tables */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Attendance Chart */}
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold text-[#1e293b]">Weekly Attendance</h3>
                    <button className="text-[#3a57e8] text-sm">View Details</button>
                  </div>
                  <div className="h-64">
                    <AttendanceChart data={attendanceData} />
                  </div>
                </div>

                {/* Leave Requests */}
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold text-[#1e293b]">Recent Leave Requests</h3>
                    <button className="text-[#3a57e8] text-sm">View All</button>
                  </div>
                  <div className="overflow-x-auto">
                    <table className="min-w-full">
                      <thead>
                        <tr className="border-b">
                          <th className="text-left py-3 px-2 text-sm font-medium text-gray-500">Employee</th>
                          <th className="text-left py-3 px-2 text-sm font-medium text-gray-500">Type</th>
                          <th className="text-left py-3 px-2 text-sm font-medium text-gray-500">Duration</th>
                          <th className="text-left py-3 px-2 text-sm font-medium text-gray-500">Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        {leaveRequests.map(request => (
                          <tr key={request.id} className="border-b hover:bg-gray-50">
                            <td className="py-3 px-2">{request.employee}</td>
                            <td className="py-3 px-2">{request.type}</td>
                            <td className="py-3 px-2">{new Date(request.from).toLocaleDateString()} - {new Date(request.to).toLocaleDateString()}</td>
                            <td className="py-3 px-2">
                              <span className={`px-2 py-1 rounded-full text-xs ${
                                request.status === 'Approved' ? 'bg-green-100 text-green-800' : 
                                request.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' : 
                                'bg-red-100 text-red-800'
                              }`}>
                                {request.status}
                              </span>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

              {/* Bottom Row */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Recent Employees */}
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold text-[#1e293b]">Recent Employees</h3>
                    <button className="text-[#3a57e8] text-sm">View All</button>
                  </div>
                  <div className="space-y-4">
                    {employeesData.slice(0, 3).map(employee => (
                      <div key={employee.id} className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
                        <div className="flex items-center space-x-3">
                          <img src={employee.avatar} alt={employee.name} className="w-10 h-10 rounded-full" />
                          <div>
                            <p className="font-medium">{employee.name}</p>
                            <p className="text-sm text-gray-500">{employee.position}</p>
                          </div>
                        </div>
                        <span className={`px-2 py-1 rounded-full text-xs ${
                          employee.status === 'Active' ? 'bg-green-100 text-green-800' : 
                          'bg-yellow-100 text-yellow-800'
                        }`}>
                          {employee.status}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Upcoming Events */}
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold text-[#1e293b]">Upcoming Events</h3>
                    <button className="text-[#3a57e8] text-sm">View Calendar</button>
                  </div>
                  <div className="space-y-4">
                    {upcomingEvents.map(event => (
                      <div key={event.id} className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
                        <div>
                          <p className="font-medium">{event.title}</p>
                          <p className="text-sm text-gray-500">{new Date(event.date).toLocaleDateString()} • {event.participants} participants</p>
                        </div>
                        <button className="text-[#3a57e8]">
                          <MoreHorizontal size={18} />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'employees' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold text-[#1e293b]">Employee Directory</h2>
                <button className="bg-[#3a57e8] text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                  Add Employee
                </button>
              </div>
              
              <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="min-w-full">
                    <thead>
                      <tr className="bg-gray-50 border-b">
                        <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Employee</th>
                        <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Position</th>
                        <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Department</th>
                        <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Status</th>
                        <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredEmployees.map(employee => (
                        <tr key={employee.id} className="border-b hover:bg-gray-50">
                          <td className="py-3 px-4">
                            <div className="flex items-center space-x-3">
                              <img src={employee.avatar} alt={employee.name} className="w-10 h-10 rounded-full" />
                              <span className="font-medium">{employee.name}</span>
                            </div>
                          </td>
                          <td className="py-3 px-4">{employee.position}</td>
                          <td className="py-3 px-4">{employee.department}</td>
                          <td className="py-3 px-4">
                            <span className={`px-2 py-1 rounded-full text-xs ${
                              employee.status === 'Active' ? 'bg-green-100 text-green-800' : 
                              'bg-yellow-100 text-yellow-800'
                            }`}>
                              {employee.status}
                            </span>
                          </td>
                          <td className="py-3 px-4">
                            <div className="flex space-x-2">
                              <button className="text-blue-600 hover:text-blue-800">Edit</button>
                              <button className="text-red-600 hover:text-red-800">Delete</button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

          {/* Placeholder for other tabs */}
          {activeTab !== 'dashboard' && activeTab !== 'employees' && (
            <div className="flex items-center justify-center h-64">
              <div className="text-center">
                <h3 className="text-xl font-medium text-gray-500 mb-2">{activeTab.charAt(0).toUpperCase() + activeTab.slice(1)} Module</h3>
                <p className="text-gray-400">This section is under development</p>
              </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}

// Component for sidebar items
function SidebarItem({ icon, label, active, onClick }) {
  return (
    <button
      className={`flex items-center w-full px-6 py-3 text-left transition-colors ${
        active 
          ? 'text-[#3a57e8] bg-[#f0f5ff] border-r-4 border-[#3a57e8]' 
          : 'text-gray-600 hover:bg-gray-100'
      }`}
      onClick={onClick}
    >
      <span className="mr-3">{icon}</span>
      <span className="font-medium">{label}</span>
    </button>
  );
}

// Component for stat cards
function StatCard({ title, value, change, isPositive, icon }) {
  return (
    <div className="bg-white p-6 rounded-lg shadow-sm">
      <div className="flex justify-between items-start">
        <div>
          <p className="text-sm text-gray-500 mb-1">{title}</p>
          <h3 className="text-2xl font-bold">{value}</h3>
          <div className="flex items-center mt-2">
            {isPositive ? (
              <ArrowUpRight size={16} className="text-green-500 mr-1" />
            ) : (
              <ArrowDownRight size={16} className="text-red-500 mr-1" />
            )}
            <span className={isPositive ? "text-green-500 text-sm" : "text-red-500 text-sm"}>
              {change} from last month
            </span>
          </div>
        </div>
        <div className="p-3 bg-[#f0f5ff] rounded-full">
          {icon}
        </div>
      </div>
    </div>
  );
}

// Attendance Chart Component
function AttendanceChart({ data }) {
  return (
    <div className="w-full h-full flex items-end space-x-4 pt-4">
      {data.map((item, index) => (
        <div key={index} className="flex-1 flex flex-col items-center">
          <div className="w-full flex flex-col space-y-1">
            <div 
              className="w-full bg-[#3a57e8] rounded-t-sm" 
              style={{ height: `${(item.present / 50) * 100}%` }}
              title={`Present: ${item.present}`}
            ></div>
            <div 
              className="w-full bg-[#ef4444] rounded-t-sm" 
              style={{ height: `${(item.absent / 50) * 100}%` }}
              title={`Absent: ${item.absent}`}
            ></div>
            <div 
              className="w-full bg-[#f59e0b] rounded-t-sm" 
              style={{ height: `${(item.leave / 50) * 100}%` }}
              title={`Leave: ${item.leave}`}
            ></div>
          </div>
          <div className="mt-2 text-xs text-gray-500">{item.day}</div>
        </div>
      ))}
    </div>
  );
}