diff --git a/src/app/employees/page.tsx b/src/app/employees/page.tsx new file mode 100644 index 0000000..ae35e44 --- /dev/null +++ b/src/app/employees/page.tsx @@ -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([ + { 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(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 ( + + + +
+
+
+
+ +

Employee Directory

+
+ +
+ + {showForm && ( +
+

{editingId ? "Edit Employee" : "Add New Employee"}

+
+
+ 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" + /> + 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" + /> + 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" + /> + 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" + /> +
+
+ + +
+
+
+ )} + +
+
+ + + + + + + + + + + + {employees.map((employee, idx) => ( + + + + + + + + ))} + +
NameEmailDepartmentPointsActions
{employee.name}{employee.email}{employee.department} + {employee.points} + +
+ + +
+
+
+
+ +
+

Total Employees: {employees.length}

+

Total Points Distributed: {employees.reduce((sum, emp) => sum + emp.points, 0)}

+
+
+
+ + + + ); +} \ No newline at end of file diff --git a/src/app/leaderboard/page.tsx b/src/app/leaderboard/page.tsx new file mode 100644 index 0000000..0e1e7ba --- /dev/null +++ b/src/app/leaderboard/page.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import MetricCardOne from '@/components/sections/metrics/MetricCardOne'; +import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; +import { Trophy, Medal, Target, Zap } from 'lucide-react'; + +export default function LeaderboardPage() { + return ( + + + +
+ +
+ + + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 09746fd..01f5c3c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -34,6 +34,8 @@ export default function LandingPage() { { name: "How It Works", id: "features" }, { name: "Features", id: "about" }, { name: "Pricing", id: "pricing" }, + { name: "Leaderboard", id: "/leaderboard" }, + { name: "Rewards", id: "/rewards" }, { name: "FAQ", id: "faq" }, { name: "Contact", id: "contact" } ]} diff --git a/src/app/points-dashboard/page.tsx b/src/app/points-dashboard/page.tsx new file mode 100644 index 0000000..6739b0b --- /dev/null +++ b/src/app/points-dashboard/page.tsx @@ -0,0 +1,225 @@ +"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 { TrendingUp, Award, Users, Zap, Target, BarChart3 } from 'lucide-react'; + +export default function PointsDashboardPage() { + const [employees] = useState([ + { id: "1", name: "Alice Johnson", department: "Sales", points: 250, salary: 75000 }, + { id: "2", name: "Bob Smith", department: "Engineering", points: 180, salary: 95000 }, + { id: "3", name: "Carol Davis", department: "Marketing", points: 320, salary: 65000 }, + { id: "4", name: "David Lee", department: "Sales", points: 420, salary: 80000 }, + { id: "5", name: "Emma Wilson", department: "Engineering", points: 290, salary: 100000 } + ]); + + const totalPoints = employees.reduce((sum, emp) => sum + emp.points, 0); + const avgPoints = Math.round(totalPoints / employees.length); + const totalSalaryIncrease = employees.reduce((sum, emp) => sum + (emp.salary * (emp.points / 100) * 0.001), 0); + const topPerformer = employees.reduce((prev, current) => current.points > prev.points ? current : prev); + + return ( + + + +
+
+

Points Dashboard

+ + {/* KPI Cards */} +
+
+
+
+

Total Points

+

{totalPoints}

+
+ +
+
+ +
+
+
+

Average Points

+

{avgPoints}

+
+ +
+
+ +
+
+
+

Active Employees

+

{employees.length}

+
+ +
+
+ +
+
+
+

Total Salary Increase

+

${totalSalaryIncrease.toFixed(2)}

+
+ +
+
+
+ + {/* Performance Metrics */} +
+
+
+ +

Top Performer

+
+
+

Employee with Most Points

+

{topPerformer.name}

+
+
+

Points

+

{topPerformer.points}

+
+
+

Salary Increase

+

+{((topPerformer.points / 100) * 0.1).toFixed(2)}%

+
+
+
+
+ +
+
+ +

Distribution

+
+
+
+

Points per Employee (Average)

+
+
+
+

{avgPoints} / 500 target

+
+
+
+
+ + {/* Employee Leaderboard */} +
+
+

+ + Employee Leaderboard +

+
+
+ + + + + + + + + + + + + {[...employees].sort((a, b) => b.points - a.points).map((employee, idx) => { + const milestones = Math.floor(employee.points / 100); + return ( + + + + + + + + + ); + })} + +
RankNameDepartmentPointsSalary IncreaseMilestones
+ + {idx + 1} + + {employee.name}{employee.department} + {employee.points} + + +{((employee.points / 100) * 0.1).toFixed(2)}% + + {milestones} +
+
+
+
+
+ + + + ); +} \ No newline at end of file diff --git a/src/app/rewards/page.tsx b/src/app/rewards/page.tsx new file mode 100644 index 0000000..3a05162 --- /dev/null +++ b/src/app/rewards/page.tsx @@ -0,0 +1,116 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo'; +import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; +import { Gift, Star, Award } from 'lucide-react'; + +export default function RewardsPage() { + return ( + + + +
+ +
+ + + + ); +}