latosa-escrima/frontend/components/members-table.tsx

"use client";

import { useState } from "react";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { ScrollArea } from "@/components/ui/scroll-area";
import { UpdateMemberDialog } from "./UpdateMemberDialog";
import { AddMemberDialog } from "./AddMemberDialog";

interface Member {
	user_id: string;
	firstname: string;
	lastname: string;
	email: string;
	password: string;
	phone: string;
	role: string;
}

const initialMembers: Member[] = [
	// Add some sample data here
	{
		user_id: "1",
		firstname: "John",
		lastname: "Doe",
		email: "john@example.com",
		password: "********",
		phone: "1234567890",
		role: "User",
	},
	{
		user_id: "1",
		firstname: "John",
		lastname: "Doe",
		email: "john@example.com",
		password: "********",
		phone: "1234567890",
		role: "User",
	},
	{
		user_id: "1",
		firstname: "John",
		lastname: "Doe",
		email: "john@example.com",
		password: "********",
		phone: "1234567890",
		role: "User",
	},
	{
		user_id: "1",
		firstname: "John",
		lastname: "Doe",
		email: "john@example.com",
		password: "********",
		phone: "1234567890",
		role: "User",
	},
	{
		user_id: "1",
		firstname: "John",
		lastname: "Doe",
		email: "john@example.com",
		password: "********",
		phone: "1234567890",
		role: "User",
	},
	{
		user_id: "1",
		firstname: "John",
		lastname: "Doe",
		email: "john@example.com",
		password: "********",
		phone: "1234567890",
		role: "User",
	},
	{
		user_id: "1",
		firstname: "John",
		lastname: "Doe",
		email: "john@example.com",
		password: "********",
		phone: "1234567890",
		role: "User",
	},
	// Add more sample members...
];

export function MembersTable() {
	const [members, setMembers] = useState<Member[]>(initialMembers);
	const [selectMode, setSelectMode] = useState(false);
	const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
	const [updateDialogOpen, setUpdateDialogOpen] = useState(false);
	const [addDialogOpen, setAddDialogOpen] = useState(false);
	const [currentMember, setCurrentMember] = useState<Member | null>(null);

	const toggleSelectMode = () => {
		setSelectMode(!selectMode);
		setSelectedMembers([]);
	};

	const toggleMemberSelection = (userId: string) => {
		setSelectedMembers((prev) =>
			prev.includes(userId)
				? prev.filter((id) => id !== userId)
				: [...prev, userId],
		);
	};

	const handleUpdate = (member: Member) => {
		setCurrentMember(member);
		setUpdateDialogOpen(true);
	};

	const handleDelete = (userId: string) => {
		setMembers((prev) =>
			prev.filter((member) => member.user_id !== userId),
		);
	};

	const handleAdd = (newMember: Member) => {
		setMembers((prev) => [
			...prev,
			{ ...newMember, user_id: String(prev.length + 1) },
		]);
	};

	return (
		<div className="space-y-4">
			<div className="flex justify-between">
				<Button onClick={toggleSelectMode}>
					{selectMode ? "Cancel Selection" : "Select"}
				</Button>
				<Button onClick={() => setAddDialogOpen(true)}>
					Add New Member
				</Button>
			</div>
			<div className="relative">
				<ScrollArea className="h-[400px] rounded-md border">
					<Table>
						<TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
							<TableRow>
								{selectMode && (
									<TableHead className="w-[50px]">
										Select
									</TableHead>
								)}
								<TableHead>User ID</TableHead>
								<TableHead>First Name</TableHead>
								<TableHead>Last Name</TableHead>
								<TableHead>Email</TableHead>
								<TableHead>Password</TableHead>
								<TableHead>Phone</TableHead>
								<TableHead>Role</TableHead>
								<TableHead className="text-right">
									Actions
								</TableHead>
							</TableRow>
						</TableHeader>
						<TableBody>
							{members.map((member) => (
								<TableRow key={member.user_id}>
									{selectMode && (
										<TableCell>
											<Checkbox
												checked={selectedMembers.includes(
													member.user_id,
												)}
												onCheckedChange={() =>
													toggleMemberSelection(
														member.user_id,
													)
												}
											/>
										</TableCell>
									)}
									<TableCell>{member.user_id}</TableCell>
									<TableCell>{member.firstname}</TableCell>
									<TableCell>{member.lastname}</TableCell>
									<TableCell>{member.email}</TableCell>
									<TableCell>{member.password}</TableCell>
									<TableCell>{member.phone}</TableCell>
									<TableCell>{member.role}</TableCell>
									<TableCell className="text-right">
										<Button
											variant="outline"
											size="sm"
											className="mr-2"
											onClick={() => handleUpdate(member)}
										>
											Modify
										</Button>
										<Button
											variant="destructive"
											size="sm"
											onClick={() =>
												handleDelete(member.user_id)
											}
										>
											Delete
										</Button>
									</TableCell>
								</TableRow>
							))}
						</TableBody>
					</Table>
				</ScrollArea>
			</div>
			<UpdateMemberDialog
				isOpen={updateDialogOpen}
				onClose={() => setUpdateDialogOpen(false)}
				member={currentMember}
				onUpdate={(updatedMember) => {
					setMembers((prev) =>
						prev.map((m) =>
							m.user_id === updatedMember.user_id
								? updatedMember
								: m,
						),
					);
					setUpdateDialogOpen(false);
				}}
			/>
			<AddMemberDialog
				isOpen={addDialogOpen}
				onClose={() => setAddDialogOpen(false)}
				onAdd={handleAdd}
			/>
		</div>
	);
}