Add src/app/employees/page.tsx
This commit is contained in:
241
src/app/employees/page.tsx
Normal file
241
src/app/employees/page.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Plus, Trash2, Edit2, Users } from 'lucide-react';
|
||||
|
||||
interface Employee {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
department: string;
|
||||
points: number;
|
||||
}
|
||||
|
||||
export default function EmployeesPage() {
|
||||
const [employees, setEmployees] = useState<Employee[]>([
|
||||
{ id: "1", name: "Alice Johnson", email: "alice@company.com", department: "Sales", points: 250 },
|
||||
{ id: "2", name: "Bob Smith", email: "bob@company.com", department: "Engineering", points: 180 },
|
||||
{ id: "3", name: "Carol Davis", email: "carol@company.com", department: "Marketing", points: 320 }
|
||||
]);
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [formData, setFormData] = useState({ name: "", email: "", department: "", points: "0" });
|
||||
|
||||
const handleAddEmployee = () => {
|
||||
setEditingId(null);
|
||||
setFormData({ name: "", email: "", department: "", points: "0" });
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleEditEmployee = (employee: Employee) => {
|
||||
setEditingId(employee.id);
|
||||
setFormData({ name: employee.name, email: employee.email, department: employee.department, points: String(employee.points) });
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleSaveEmployee = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (editingId) {
|
||||
setEmployees(employees.map(emp => emp.id === editingId ? { ...emp, name: formData.name, email: formData.email, department: formData.department, points: parseInt(formData.points) } : emp));
|
||||
} else {
|
||||
setEmployees([...employees, { id: String(Date.now()), name: formData.name, email: formData.email, department: formData.department, points: parseInt(formData.points) }]);
|
||||
}
|
||||
setShowForm(false);
|
||||
};
|
||||
|
||||
const handleDeleteEmployee = (id: string) => {
|
||||
setEmployees(employees.filter(emp => emp.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="blurBottom"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="PointsHub"
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "/points-dashboard" },
|
||||
{ name: "Employees", id: "/employees" },
|
||||
{ name: "Home", id: "/" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 pt-32 pb-20 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<Users className="w-8 h-8 text-blue-400" />
|
||||
<h1 className="text-4xl font-bold text-white">Employee Directory</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddEmployee}
|
||||
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Employee
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="bg-gray-700 rounded-lg p-6 mb-8 border border-gray-600">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">{editingId ? "Edit Employee" : "Add New Employee"}</h2>
|
||||
<form onSubmit={handleSaveEmployee} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
required
|
||||
className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Department"
|
||||
value={formData.department}
|
||||
onChange={(e) => setFormData({ ...formData, department: e.target.value })}
|
||||
required
|
||||
className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Points"
|
||||
value={formData.points}
|
||||
onChange={(e) => setFormData({ ...formData, points: e.target.value })}
|
||||
required
|
||||
className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded transition-colors"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowForm(false)}
|
||||
className="bg-gray-600 hover:bg-gray-500 text-white px-6 py-2 rounded transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-gray-700 rounded-lg overflow-hidden border border-gray-600">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-600 border-b border-gray-500">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-white font-semibold">Name</th>
|
||||
<th className="px-6 py-4 text-left text-white font-semibold">Email</th>
|
||||
<th className="px-6 py-4 text-left text-white font-semibold">Department</th>
|
||||
<th className="px-6 py-4 text-center text-white font-semibold">Points</th>
|
||||
<th className="px-6 py-4 text-center text-white font-semibold">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{employees.map((employee, idx) => (
|
||||
<tr key={employee.id} className={idx % 2 === 0 ? "bg-gray-700" : "bg-gray-750"}>
|
||||
<td className="px-6 py-4 text-gray-100">{employee.name}</td>
|
||||
<td className="px-6 py-4 text-gray-300">{employee.email}</td>
|
||||
<td className="px-6 py-4 text-gray-300">{employee.department}</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">{employee.points}</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<div className="flex gap-2 justify-center">
|
||||
<button
|
||||
onClick={() => handleEditEmployee(employee)}
|
||||
className="text-blue-400 hover:text-blue-300 transition-colors"
|
||||
title="Edit employee"
|
||||
>
|
||||
<Edit2 className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteEmployee(employee.id)}
|
||||
className="text-red-400 hover:text-red-300 transition-colors"
|
||||
title="Delete employee"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-gray-300 text-sm">
|
||||
<p>Total Employees: <span className="font-bold text-blue-400">{employees.length}</span></p>
|
||||
<p>Total Points Distributed: <span className="font-bold text-blue-400">{employees.reduce((sum, emp) => sum + emp.points, 0)}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="PointsHub"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Dashboard", href: "/points-dashboard" },
|
||||
{ label: "Employees", href: "/employees" },
|
||||
{ label: "Home", href: "/" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Support", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "Status Page", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user