Untitled

import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table } from "@/components/ui/table";
import { Select } from "@/components/ui/select";

const employeesData = [
  {
    id: 1,
    name: "John Doe",
    employeeId: "EMP001",
    designation: "Software Engineer",
    department: "IT",
    manager: "Michael Scott",
    dateOfJoining: "2021-06-15",
    mobile: "9876543210",
    email: "john.doe@example.com",
    daysWorked: { "2025-03": 25, "2025-02": 23 },
    hoursWorked: { "2025-03": 200, "2025-02": 180 },
    performanceMarks: { "2025-03": 85, "2025-02": 80 },
    remarks: { "2025-03": "Excellent Performance", "2025-02": "Good work" },
    level: { "2025-03": "Gold", "2025-02": "Silver" },
    memo: { "2025-03": "No pending memos", "2025-02": "Late submission of reports" },
  },
];

const announcements = [
  { id: 1, message: "Annual performance review meeting on 15th March." },
  { id: 2, message: "Company town hall on 20th March at 3 PM." },
];

export default function EmployeePerformance() {
  const [selectedMonth, setSelectedMonth] = useState("2025-03");
  const [currentEmployee] = useState(employeesData[0]);
  const [showNotification, setShowNotification] = useState(false);

  useEffect(() => {
    setShowNotification(true);
    const timer = setTimeout(() => setShowNotification(false), 5000);
    return () => clearTimeout(timer);
  }, []);

  const calculateMonthsWorked = (dateOfJoining) => {
    const joinDate = new Date(dateOfJoining);
    const currentDate = new Date();
    const yearsDiff = currentDate.getFullYear() - joinDate.getFullYear();
    const monthsDiff = currentDate.getMonth() - joinDate.getMonth();
    return yearsDiff * 12 + monthsDiff;
  };

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4">Employee Performance Dashboard</h1>
      <div className="mb-4">
        <label>Select Month: </label>
        <Select value={selectedMonth} onChange={(e) => setSelectedMonth(e.target.value)}>
          <option value="2025-03">March 2025</option>
          <option value="2025-02">February 2025</option>
        </Select>
      </div>

      {showNotification && (
        <div className="bg-blue-200 text-blue-800 p-2 rounded mb-4">
          New Announcement: {announcements[0].message}
        </div>
      )}

      <Card className="mt-4">
        <CardContent>
          <h2 className="text-lg font-bold">{currentEmployee.name}'s Profile</h2>
          <p><strong>Employee ID:</strong> {currentEmployee.employeeId}</p>
          <p><strong>Designation:</strong> {currentEmployee.designation}</p>
          <p><strong>Department:</strong> {currentEmployee.department}</p>
          <p><strong>Manager:</strong> {currentEmployee.manager}</p>
          <p><strong>Date of Joining:</strong> {currentEmployee.dateOfJoining}</p>
          <p><strong>Months Worked:</strong> {calculateMonthsWorked(currentEmployee.dateOfJoining)}</p>
          <p><strong>Mobile:</strong> {currentEmployee.mobile}</p>
          <p><strong>Email:</strong> {currentEmployee.email}</p>
          <p><strong>Days Worked:</strong> {currentEmployee.daysWorked[selectedMonth]}</p>
          <p><strong>Hours Worked:</strong> {currentEmployee.hoursWorked[selectedMonth]}</p>
          <p><strong>Performance Marks:</strong> {currentEmployee.performanceMarks[selectedMonth]}</p>
          <p><strong>Remarks:</strong> {currentEmployee.remarks[selectedMonth]}</p>
          <p><strong>Level:</strong> {currentEmployee.level[selectedMonth]}</p>
          <p><strong>Memo:</strong> {currentEmployee.memo[selectedMonth]}</p>
        </CardContent>
      </Card>

      <Card className="mt-4 bg-yellow-100 p-2">
        <CardContent>
          <h2 className="text-lg font-bold">Announcements</h2>
          {announcements.map((announcement) => (
            <p key={announcement.id}>{announcement.message}</p>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}