import { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Search, Users } from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import { toast } from "sonner";
import { EmployeeCard } from "@/components/EmployeeCard";
import { AddEmployeeDialog } from "@/components/AddEmployeeDialog";
import { EditEmployeeDialog } from "@/components/EditEmployeeDialog";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
interface Employee {
id: string;
name: string;
email: string;
position: string;
department: string;
hire_date: string;
phone?: string;
photo_url?: string;
}
const Index = () => {
const [employees, setEmployees] = useState([]);
const [filteredEmployees, setFilteredEmployees] = useState([]);
const [searchQuery, setSearchQuery] = useState("");
const [loading, setLoading] = useState(true);
const [editingEmployee, setEditingEmployee] = useState(null);
const [deletingId, setDeletingId] = useState(null);
const fetchEmployees = async () => {
try {
const { data, error } = await supabase
.from("employees")
.select("*")
.order("created_at", { ascending: false });
if (error) throw error;
setEmployees(data || []);
setFilteredEmployees(data || []);
} catch (error: any) {
toast.error(error.message || "Failed to fetch employees");
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchEmployees();
}, []);
useEffect(() => {
if (searchQuery.trim() === "") {
setFilteredEmployees(employees);
} else {
const query = searchQuery.toLowerCase();
const filtered = employees.filter(
(emp) =>
emp.name.toLowerCase().includes(query) ||
emp.email.toLowerCase().includes(query) ||
emp.position.toLowerCase().includes(query) ||
emp.department.toLowerCase().includes(query)
);
setFilteredEmployees(filtered);
}
}, [searchQuery, employees]);
const handleDelete = async () => {
if (!deletingId) return;
try {
const { error } = await supabase.from("employees").delete().eq("id", deletingId);
if (error) throw error;
toast.success("Employee deleted successfully!");
fetchEmployees();
} catch (error: any) {
toast.error(error.message || "Failed to delete employee");
} finally {
setDeletingId(null);
}
};
return (
!open && setEditingEmployee(null)}
onEmployeeUpdated={fetchEmployees}
/>
!open && setDeletingId(null)}>
Are you sure?
This action cannot be undone. This will permanently delete the employee record.
Cancel
Delete
);
};
export default Index;
Employee Management
Manage your team members efficiently
{loading ? (
) : filteredEmployees.length === 0 ? (
Loading employees...
{searchQuery ? "No employees found" : "No employees yet"}
{searchQuery ? "Try adjusting your search criteria" : "Get started by adding your first employee"}
{!searchQuery &&
{filteredEmployees.map((employee) => (
)}