Untitled
unknown
plain_text
17 days ago
6.8 kB
3
Indexable
Never
'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> ) }
Leave a Comment