Untitled

'use client'

import { useState } from 'react'
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import 'react-big-calendar/lib/css/react-big-calendar.css'

// Set up the localizer for react-big-calendar
const localizer = momentLocalizer(moment)

// Define the Employee type
type Employee = {
  id: number
  name: string
  brand: string
  section: string
  weekOffsTaken: number
  weekOffsLeft: number
  sickLeavesTaken: number
  paidLeavesTaken: number
}

// Initial employee data
const initialEmployees: Employee[] = Array.from({ length: 16 }, (_, i) => ({
  id: i + 1,
  name: `Employee ${i + 1}`,
  brand: `Brand ${Math.floor(i / 4) + 1}`,
  section: `Section ${(i % 4) + 1}`,
  weekOffsTaken: 0,
  weekOffsLeft: 4,
  sickLeavesTaken: 0,
  paidLeavesTaken: 0
}))

export default function Component() {
  const [employees, setEmployees] = useState<Employee[]>(initialEmployees)
  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null)
  const [events, setEvents] = useState<any[]>([])

  const handleEditEmployee = (employee: Employee) => {
    setSelectedEmployee(employee)
  }

  const handleSaveEmployee = (updatedEmployee: Employee) => {
    setEmployees(employees.map(emp => emp.id === updatedEmployee.id ? updatedEmployee : emp))
    setSelectedEmployee(null)
  }

  const handleAddEvent = (event: any) => {
    const newEvent = {
      ...event,
      title: 'Week Off',
      allDay: true
    }
    setEvents([...events, newEvent])

    // Update employee's week off count
    if (selectedEmployee) {
      const updatedEmployee = {
        ...selectedEmployee,
        weekOffsTaken: selectedEmployee.weekOffsTaken + 1,
        weekOffsLeft: selectedEmployee.weekOffsLeft - 1
      }
      handleSaveEmployee(updatedEmployee)
    }
  }

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Lifestyle Concept - Employee Leave Management</h1>
      
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Brand</TableHead>
            <TableHead>Section</TableHead>
            <TableHead>Week Offs Taken</TableHead>
            <TableHead>Week Offs Left</TableHead>
            <TableHead>Sick Leaves</TableHead>
            <TableHead>Paid Leaves</TableHead>
            <TableHead>Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {employees.map(employee => (
            <TableRow key={employee.id}>
              <TableCell>{employee.name}</TableCell>
              <TableCell>{employee.brand}</TableCell>
              <TableCell>{employee.section}</TableCell>
              <TableCell>{employee.weekOffsTaken}</TableCell>
              <TableCell>{employee.weekOffsLeft}</TableCell>
              <TableCell>{employee.sickLeavesTaken}</TableCell>
              <TableCell>{employee.paidLeavesTaken}</TableCell>
              <TableCell>
                <Dialog>
                  <DialogTrigger asChild>
                    <Button variant="outline" onClick={() => handleEditEmployee(employee)}>Edit</Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Edit Employee</DialogTitle>
                    </DialogHeader>
                    <div className="grid gap-4 py-4">
                      <div className="grid grid-cols-4 items-center gap-4">
                        <Label htmlFor="name" className="text-right">
                          Name
                        </Label>
                        <Input
                          id="name"
                          value={selectedEmployee?.name}
                          onChange={(e) => setSelectedEmployee({ ...selectedEmployee!, name: e.target.value })}
                          className="col-span-3"
                        />
                      </div>
                      <div className="grid grid-cols-4 items-center gap-4">
                        <Label htmlFor="brand" className="text-right">
                          Brand
                        </Label>
                        <Input
                          id="brand"
                          value={selectedEmployee?.brand}
                          onChange={(e) => setSelectedEmployee({ ...selectedEmployee!, brand: e.target.value })}
                          className="col-span-3"
                        />
                      </div>
                      <div className="grid grid-cols-4 items-center gap-4">
                        <Label htmlFor="section" className="text-right">
                          Section
                        </Label>
                        <Input
                          id="section"
                          value={selectedEmployee?.section}
                          onChange={(e) => setSelectedEmployee({ ...selectedEmployee!, section: e.target.value })}
                          className="col-span-3"
                        />
                      </div>
                    </div>
                    <Button onClick={() => selectedEmployee && handleSaveEmployee(selectedEmployee)}>
                      Save Changes
                    </Button>
                  </DialogContent>
                </Dialog>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <div className="mt-8">
        <h2 className="text-xl font-semibold mb-4">Leave Calendar</h2>
        <Select onValueChange={(value) => setSelectedEmployee(employees.find(emp => emp.id === parseInt(value)) || null)}>
          <SelectTrigger className="w-[180px] mb-4">
            <SelectValue placeholder="Select Employee" />
          </SelectTrigger>
          <SelectContent>
            {employees.map(employee => (
              <SelectItem key={employee.id} value={employee.id.toString()}>{employee.name}</SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Calendar
          localizer={localizer}
          events={events}
          startAccessor="start"
          endAccessor="end"
          style={{ height: 500 }}
          selectable
          onSelectSlot={handleAddEvent}
        />
      </div>
    </div>
  )
}