crud
admin crud ops implemented partialy
This commit is contained in:
dimitar committed
1 parent
c357de515f
commit
9d2bfda0ca
21 files changed
+6108
-3172
No files matched your search
@@ -1,167 +1,248 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import React, { useState, useMemo } from 'react'
|
||||
import { AgGridReact } from 'ag-grid-react'
|
||||
import { ColDef } from 'ag-grid-community'
|
||||
import 'ag-grid-community/styles/ag-grid.css'
|
||||
import 'ag-grid-community/styles/ag-theme-alpine.css'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { AgGridReact } from "ag-grid-react";
|
||||
import { ColDef, ModuleRegistry, AllCommunityModule } from "ag-grid-community";
|
||||
import "ag-grid-community/styles/ag-grid.css";
|
||||
import "ag-grid-community/styles/ag-theme-alpine.css";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
|
||||
ModuleRegistry.registerModules([AllCommunityModule]);
|
||||
|
||||
interface User {
|
||||
id: string
|
||||
email: string
|
||||
firstName: string
|
||||
lastName: string
|
||||
role: string
|
||||
phone?: string
|
||||
createdAt: Date
|
||||
id: string;
|
||||
email: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
role: string;
|
||||
phone?: string;
|
||||
createdAt: Date;
|
||||
client?: {
|
||||
id: string
|
||||
membershipType: string
|
||||
membershipStatus: string
|
||||
joinDate: Date
|
||||
lastVisit?: Date
|
||||
}
|
||||
id: string;
|
||||
membershipType: string;
|
||||
membershipStatus: string;
|
||||
joinDate: Date;
|
||||
lastVisit?: Date;
|
||||
};
|
||||
}
|
||||
|
||||
interface UserGridProps {
|
||||
users: User[]
|
||||
onUserSelect?: (user: User) => void
|
||||
loading?: boolean
|
||||
users: User[];
|
||||
onUserSelect?: (user: User) => void;
|
||||
onEditUser?: (user: User) => void;
|
||||
onDeleteUser?: (user: User) => void;
|
||||
onBulkDelete?: (users: User[]) => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export function UserGrid({ users, onUserSelect, loading = false }: UserGridProps) {
|
||||
const [selectedUser, setSelectedUser] = useState<User | null>(null)
|
||||
export function UserGrid({
|
||||
users,
|
||||
onUserSelect,
|
||||
onEditUser,
|
||||
onDeleteUser,
|
||||
onBulkDelete,
|
||||
loading = false,
|
||||
}: UserGridProps) {
|
||||
const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||||
|
||||
const columnDefs: ColDef<User>[] = useMemo(() => [
|
||||
{
|
||||
headerName: 'Name',
|
||||
valueGetter: (params) => `${params.data?.firstName} ${params.data?.lastName}`,
|
||||
filter: 'agTextColumnFilter',
|
||||
sortable: true,
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
headerName: 'Email',
|
||||
field: 'email',
|
||||
filter: 'agTextColumnFilter',
|
||||
sortable: true,
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
headerName: 'Role',
|
||||
field: 'role',
|
||||
filter: 'agSetColumnFilter',
|
||||
sortable: true,
|
||||
cellRenderer: (params: any) => {
|
||||
const roleColors = {
|
||||
admin: 'bg-purple-100 text-purple-800',
|
||||
trainer: 'bg-blue-100 text-blue-800',
|
||||
client: 'bg-green-100 text-green-800',
|
||||
}
|
||||
const colorClass = roleColors[params.value as keyof typeof roleColors] || 'bg-gray-100 text-gray-800'
|
||||
return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`
|
||||
const columnDefs: ColDef<User>[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
headerName: "Name",
|
||||
valueGetter: (params) =>
|
||||
`${params.data?.firstName} ${params.data?.lastName}`,
|
||||
filter: "agTextColumnFilter",
|
||||
sortable: true,
|
||||
minWidth: 150,
|
||||
},
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
headerName: 'Phone',
|
||||
field: 'phone',
|
||||
filter: 'agTextColumnFilter',
|
||||
sortable: true,
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
headerName: 'Membership',
|
||||
valueGetter: (params) => params.data?.client?.membershipType || 'N/A',
|
||||
filter: 'agSetColumnFilter',
|
||||
sortable: true,
|
||||
cellRenderer: (params: any) => {
|
||||
if (!params.value || params.value === 'N/A') return 'N/A'
|
||||
|
||||
const membershipColors = {
|
||||
vip: 'bg-yellow-100 text-yellow-800',
|
||||
premium: 'bg-blue-100 text-blue-800',
|
||||
basic: 'bg-gray-100 text-gray-800',
|
||||
}
|
||||
const colorClass = membershipColors[params.value as keyof typeof membershipColors] || 'bg-gray-100 text-gray-800'
|
||||
return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`
|
||||
{
|
||||
headerName: "Email",
|
||||
field: "email",
|
||||
filter: "agTextColumnFilter",
|
||||
sortable: true,
|
||||
minWidth: 200,
|
||||
},
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
headerName: 'Status',
|
||||
valueGetter: (params) => params.data?.client?.membershipStatus || 'N/A',
|
||||
filter: 'agSetColumnFilter',
|
||||
sortable: true,
|
||||
cellRenderer: (params: any) => {
|
||||
if (!params.value || params.value === 'N/A') return 'N/A'
|
||||
|
||||
const statusColors = {
|
||||
active: 'bg-green-100 text-green-800',
|
||||
inactive: 'bg-red-100 text-red-800',
|
||||
suspended: 'bg-yellow-100 text-yellow-800',
|
||||
}
|
||||
const colorClass = statusColors[params.value as keyof typeof statusColors] || 'bg-gray-100 text-gray-800'
|
||||
return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`
|
||||
{
|
||||
headerName: "Role",
|
||||
field: "role",
|
||||
filter: "agTextColumnFilter",
|
||||
sortable: true,
|
||||
cellRenderer: (params: any) => {
|
||||
const roleColors = {
|
||||
admin: "bg-purple-100 text-purple-800",
|
||||
trainer: "bg-blue-100 text-blue-800",
|
||||
client: "bg-green-100 text-green-800",
|
||||
};
|
||||
const colorClass =
|
||||
roleColors[params.value as keyof typeof roleColors] ||
|
||||
"bg-gray-100 text-gray-800";
|
||||
return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
|
||||
},
|
||||
minWidth: 120,
|
||||
},
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
headerName: 'Join Date',
|
||||
valueGetter: (params) => params.data?.client?.joinDate || params.data?.createdAt,
|
||||
filter: 'agDateColumnFilter',
|
||||
sortable: true,
|
||||
valueFormatter: (params: any) => formatDate(new Date(params.value)),
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
headerName: 'Last Visit',
|
||||
valueGetter: (params) => params.data?.client?.lastVisit,
|
||||
filter: 'agDateColumnFilter',
|
||||
sortable: true,
|
||||
valueFormatter: (params: any) => params.value ? formatDate(new Date(params.value)) : 'Never',
|
||||
minWidth: 120,
|
||||
},
|
||||
], [])
|
||||
{
|
||||
headerName: "Phone",
|
||||
field: "phone",
|
||||
filter: "agTextColumnFilter",
|
||||
sortable: true,
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
headerName: "Membership",
|
||||
valueGetter: (params) => params.data?.client?.membershipType || "N/A",
|
||||
filter: "agTextColumnFilter",
|
||||
sortable: true,
|
||||
cellRenderer: (params: any) => {
|
||||
if (!params.value || params.value === "N/A") return "N/A";
|
||||
|
||||
const defaultColDef: ColDef = useMemo(() => ({
|
||||
flex: 1,
|
||||
resizable: true,
|
||||
floatingFilter: true,
|
||||
suppressMenu: true,
|
||||
}), [])
|
||||
const membershipColors = {
|
||||
vip: "bg-yellow-100 text-yellow-800",
|
||||
premium: "bg-blue-100 text-blue-800",
|
||||
basic: "bg-gray-100 text-gray-800",
|
||||
};
|
||||
const colorClass =
|
||||
membershipColors[params.value as keyof typeof membershipColors] ||
|
||||
"bg-gray-100 text-gray-800";
|
||||
return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
|
||||
},
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
headerName: "Status",
|
||||
valueGetter: (params) => params.data?.client?.membershipStatus || "N/A",
|
||||
filter: "agTextColumnFilter",
|
||||
sortable: true,
|
||||
cellRenderer: (params: any) => {
|
||||
if (!params.value || params.value === "N/A") return "N/A";
|
||||
|
||||
const onSelectionChanged = () => {
|
||||
const selectedNodes = gridRef.current?.api.getSelectedNodes()
|
||||
if (selectedNodes?.length > 0) {
|
||||
const user = selectedNodes[0].data
|
||||
setSelectedUser(user)
|
||||
onUserSelect?.(user)
|
||||
}
|
||||
}
|
||||
const statusColors = {
|
||||
active: "bg-green-100 text-green-800",
|
||||
inactive: "bg-red-100 text-red-800",
|
||||
suspended: "bg-yellow-100 text-yellow-800",
|
||||
};
|
||||
const colorClass =
|
||||
statusColors[params.value as keyof typeof statusColors] ||
|
||||
"bg-gray-100 text-gray-800";
|
||||
return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
|
||||
},
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
headerName: "Join Date",
|
||||
valueGetter: (params) =>
|
||||
params.data?.client?.joinDate || params.data?.createdAt,
|
||||
filter: "agDateColumnFilter",
|
||||
sortable: true,
|
||||
valueFormatter: (params: any) => formatDate(new Date(params.value)),
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
headerName: "Last Visit",
|
||||
valueGetter: (params) => params.data?.client?.lastVisit,
|
||||
filter: "agDateColumnFilter",
|
||||
sortable: true,
|
||||
valueFormatter: (params: any) =>
|
||||
params.value ? formatDate(new Date(params.value)) : "Never",
|
||||
minWidth: 120,
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const gridRef = React.useRef<AgGridReact<User>>(null)
|
||||
const defaultColDef: ColDef = useMemo(
|
||||
() => ({
|
||||
flex: 1,
|
||||
resizable: true,
|
||||
floatingFilter: true,
|
||||
suppressMenu: true,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const gridRef = React.useRef<AgGridReact<User>>(null);
|
||||
|
||||
const gridOptions = {
|
||||
theme: "legacy",
|
||||
columnDefs,
|
||||
defaultColDef,
|
||||
rowData: users,
|
||||
rowSelection: 'single',
|
||||
onSelectionChanged,
|
||||
enableRangeSelection: true,
|
||||
enableCellTextSelection: true,
|
||||
rowSelection: "multiple",
|
||||
onSelectionChanged: () => {
|
||||
const selectedNodes = gridRef.current?.api.getSelectedNodes();
|
||||
const selectedData = selectedNodes?.map((node) => node.data) || [];
|
||||
setSelectedUsers(selectedData);
|
||||
if (selectedData.length === 1 && onUserSelect) {
|
||||
onUserSelect(selectedData[0]);
|
||||
}
|
||||
},
|
||||
suppressRowClickSelection: false,
|
||||
animateRows: true,
|
||||
loading: loading,
|
||||
pagination: true,
|
||||
paginationPageSize: 20,
|
||||
paginationPageSizeSelector: [10, 20, 50, 100],
|
||||
}
|
||||
quickFilterText: searchQuery,
|
||||
};
|
||||
|
||||
const handleEdit = () => {
|
||||
if (selectedUsers.length === 1 && onEditUser) {
|
||||
onEditUser(selectedUsers[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedUsers.length === 1 && onDeleteUser) {
|
||||
onDeleteUser(selectedUsers[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = () => {
|
||||
if (selectedUsers.length > 0 && onBulkDelete) {
|
||||
onBulkDelete(selectedUsers);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ag-theme-alpine" style={{ height: '600px', width: '100%' }}>
|
||||
<AgGridReact<User> {...gridOptions} ref={gridRef} />
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users..."
|
||||
className="border border-gray-300 rounded px-4 py-2"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="bg-green-500 text-white px-4 py-2 rounded disabled:opacity-50"
|
||||
onClick={handleEdit}
|
||||
disabled={selectedUsers.length !== 1}
|
||||
>
|
||||
Edit User
|
||||
</button>
|
||||
<button
|
||||
className="bg-red-500 text-white px-4 py-2 rounded disabled:opacity-50"
|
||||
onClick={handleDelete}
|
||||
disabled={selectedUsers.length !== 1}
|
||||
>
|
||||
Delete User
|
||||
</button>
|
||||
<button
|
||||
className="bg-yellow-500 text-white px-4 py-2 rounded disabled:opacity-50"
|
||||
onClick={handleBulkDelete}
|
||||
disabled={selectedUsers.length === 0}
|
||||
>
|
||||
Bulk Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ag-theme-alpine"
|
||||
style={{ height: "600px", width: "100%" }}
|
||||
>
|
||||
<AgGridReact<User> {...gridOptions} ref={gridRef} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -1,85 +1,182 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { UserGrid } from '@/components/users/UserGrid'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card'
|
||||
import { useState, useEffect } from "react";
|
||||
import { UserGrid } from "@/components/users/UserGrid";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
||||
|
||||
interface User {
|
||||
id: string
|
||||
email: string
|
||||
firstName: string
|
||||
lastName: string
|
||||
role: string
|
||||
phone?: string
|
||||
createdAt: Date
|
||||
id: string;
|
||||
email: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
role: string;
|
||||
phone?: string;
|
||||
createdAt: Date;
|
||||
client?: {
|
||||
id: string
|
||||
membershipType: string
|
||||
membershipStatus: string
|
||||
joinDate: Date
|
||||
lastVisit?: Date
|
||||
}
|
||||
id: string;
|
||||
membershipType: string;
|
||||
membershipStatus: string;
|
||||
joinDate: Date;
|
||||
lastVisit?: Date;
|
||||
};
|
||||
}
|
||||
|
||||
export function UserManagement() {
|
||||
const [users, setUsers] = useState<User[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [filter, setFilter] = useState<string>('all')
|
||||
const [selectedUser, setSelectedUser] = useState<User | null>(null)
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<string>("all");
|
||||
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [editForm, setEditForm] = useState<{
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
role: string;
|
||||
phone: string;
|
||||
} | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers()
|
||||
}, [filter])
|
||||
fetchUsers();
|
||||
}, [filter]);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
setLoading(true)
|
||||
setLoading(true);
|
||||
try {
|
||||
const url = filter === 'all'
|
||||
? '/api/users'
|
||||
: `/api/users?role=${filter}`
|
||||
|
||||
const response = await fetch(url)
|
||||
const data = await response.json()
|
||||
setUsers(data.users || [])
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch users:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
const url = filter === "all" ? "/api/users" : `/api/users?role=${filter}`;
|
||||
|
||||
const handleUserSelect = (user: User) => {
|
||||
setSelectedUser(user)
|
||||
}
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
setUsers(data.users || []);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch users:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUserSelect = (user: User | null) => {
|
||||
setSelectedUser(user);
|
||||
};
|
||||
|
||||
const handleEditUser = (user: User) => {
|
||||
setSelectedUser(user);
|
||||
setEditForm({
|
||||
firstName: user.firstName,
|
||||
lastName: user.lastName,
|
||||
email: user.email,
|
||||
role: user.role,
|
||||
phone: user.phone || "",
|
||||
});
|
||||
setIsEditing(true);
|
||||
};
|
||||
|
||||
const handleDeleteUser = (user: User) => {
|
||||
setSelectedUser(user);
|
||||
setIsDeleting(true);
|
||||
};
|
||||
|
||||
const handleBulkDelete = async (users: User[]) => {
|
||||
if (users.length === 0) return;
|
||||
|
||||
if (!confirm(`Are you sure you want to delete ${users.length} users?`))
|
||||
return;
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/users", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ids: users.map((u) => u.id) }),
|
||||
});
|
||||
if (response.ok) {
|
||||
fetchUsers();
|
||||
} else {
|
||||
alert("Error deleting users");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
const csvContent = [
|
||||
['Name', 'Email', 'Role', 'Phone', 'Membership', 'Status', 'Join Date', 'Last Visit'],
|
||||
...users.map(user => [
|
||||
[
|
||||
"Name",
|
||||
"Email",
|
||||
"Role",
|
||||
"Phone",
|
||||
"Membership",
|
||||
"Status",
|
||||
"Join Date",
|
||||
"Last Visit",
|
||||
],
|
||||
...users.map((user) => [
|
||||
`${user.firstName} ${user.lastName}`,
|
||||
user.email,
|
||||
user.role,
|
||||
user.phone || '',
|
||||
user.client?.membershipType || '',
|
||||
user.client?.membershipStatus || '',
|
||||
user.phone || "",
|
||||
user.client?.membershipType || "",
|
||||
user.client?.membershipStatus || "",
|
||||
user.client?.joinDate || user.createdAt,
|
||||
user.client?.lastVisit || ''
|
||||
])
|
||||
].map(row => row.join(',')).join('\n')
|
||||
user.client?.lastVisit || "",
|
||||
]),
|
||||
]
|
||||
.map((row) => row.join(","))
|
||||
.join("\n");
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv' })
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `users_${new Date().toISOString().split('T')[0]}.csv`
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
}
|
||||
const blob = new Blob([csvContent], { type: "text/csv" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `users_${new Date().toISOString().split("T")[0]}.csv`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchUsers()
|
||||
}
|
||||
fetchUsers();
|
||||
};
|
||||
|
||||
const handleSaveEdit = async () => {
|
||||
if (!editForm || !selectedUser) return;
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/users", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id: selectedUser.id, ...editForm }),
|
||||
});
|
||||
if (response.ok) {
|
||||
setIsEditing(false);
|
||||
setEditForm(null);
|
||||
fetchUsers();
|
||||
} else {
|
||||
alert("Error updating user");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!selectedUser) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/users?id=${selectedUser.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (response.ok) {
|
||||
setIsDeleting(false);
|
||||
setSelectedUser(null);
|
||||
fetchUsers();
|
||||
} else {
|
||||
alert("Error deleting user");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -87,26 +184,40 @@ export function UserManagement() {
|
||||
<h2 className="text-2xl font-bold">User Management</h2>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={filter === 'all' ? 'primary' : 'secondary'}
|
||||
onClick={() => setFilter('all')}
|
||||
variant={filter === "all" ? "primary" : "secondary"}
|
||||
onClick={() => setFilter("all")}
|
||||
>
|
||||
All Users
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'client' ? 'primary' : 'secondary'}
|
||||
onClick={() => setFilter('client')}
|
||||
variant="secondary"
|
||||
onClick={handleEditUser}
|
||||
disabled={!selectedUser}
|
||||
>
|
||||
Edit User
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleDeleteUser}
|
||||
disabled={!selectedUser}
|
||||
>
|
||||
Delete User
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === "client" ? "primary" : "secondary"}
|
||||
onClick={() => setFilter("client")}
|
||||
>
|
||||
Clients
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'trainer' ? 'primary' : 'secondary'}
|
||||
onClick={() => setFilter('trainer')}
|
||||
variant={filter === "trainer" ? "primary" : "secondary"}
|
||||
onClick={() => setFilter("trainer")}
|
||||
>
|
||||
Trainers
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'admin' ? 'primary' : 'secondary'}
|
||||
onClick={() => setFilter('admin')}
|
||||
variant={filter === "admin" ? "primary" : "secondary"}
|
||||
onClick={() => setFilter("admin")}
|
||||
>
|
||||
Admins
|
||||
</Button>
|
||||
@@ -134,14 +245,142 @@ export function UserManagement() {
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<UserGrid
|
||||
users={users}
|
||||
onUserSelect={handleUserSelect}
|
||||
<UserGrid
|
||||
users={users}
|
||||
onUserSelect={(user) => handleUserSelect(user)}
|
||||
onEditUser={handleEditUser}
|
||||
onDeleteUser={handleDeleteUser}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
loading={loading}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{isEditing && editForm && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
|
||||
<h3 className="text-lg font-semibold mb-4">Edit User</h3>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSaveEdit();
|
||||
}}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editForm.firstName}
|
||||
onChange={(e) =>
|
||||
setEditForm({ ...editForm, firstName: e.target.value })
|
||||
}
|
||||
className="w-full border border-gray-300 rounded px-3 py-2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editForm.lastName}
|
||||
onChange={(e) =>
|
||||
setEditForm({ ...editForm, lastName: e.target.value })
|
||||
}
|
||||
className="w-full border border-gray-300 rounded px-3 py-2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={editForm.email}
|
||||
onChange={(e) =>
|
||||
setEditForm({ ...editForm, email: e.target.value })
|
||||
}
|
||||
className="w-full border border-gray-300 rounded px-3 py-2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Role</label>
|
||||
<select
|
||||
value={editForm.role}
|
||||
onChange={(e) =>
|
||||
setEditForm({ ...editForm, role: e.target.value })
|
||||
}
|
||||
className="w-full border border-gray-300 rounded px-3 py-2"
|
||||
required
|
||||
>
|
||||
<option value="client">Client</option>
|
||||
<option value="trainer">Trainer</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={editForm.phone}
|
||||
onChange={(e) =>
|
||||
setEditForm({ ...editForm, phone: e.target.value })
|
||||
}
|
||||
className="w-full border border-gray-300 rounded px-3 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsEditing(false);
|
||||
setEditForm(null);
|
||||
}}
|
||||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isDeleting && selectedUser && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
|
||||
<h3 className="text-lg font-semibold mb-4">Delete User</h3>
|
||||
<p className="mb-4">
|
||||
Are you sure you want to delete {selectedUser.firstName}{" "}
|
||||
{selectedUser.lastName}? This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => setIsDeleting(false)}
|
||||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeleteConfirm}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedUser && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
@@ -152,22 +391,55 @@ export function UserManagement() {
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Basic Information</h4>
|
||||
<div className="space-y-1 text-sm">
|
||||
<p><span className="font-medium">Name:</span> {selectedUser.firstName} {selectedUser.lastName}</p>
|
||||
<p><span className="font-medium">Email:</span> {selectedUser.email}</p>
|
||||
<p><span className="font-medium">Phone:</span> {selectedUser.phone || 'N/A'}</p>
|
||||
<p><span className="font-medium">Role:</span> {selectedUser.role}</p>
|
||||
<p><span className="font-medium">Joined:</span> {selectedUser.createdAt.toLocaleDateString()}</p>
|
||||
<p>
|
||||
<span className="font-medium">Name:</span>{" "}
|
||||
{selectedUser.firstName} {selectedUser.lastName}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Email:</span>{" "}
|
||||
{selectedUser.email}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Phone:</span>{" "}
|
||||
{selectedUser.phone || "N/A"}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Role:</span>{" "}
|
||||
{selectedUser.role}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Joined:</span>{" "}
|
||||
{new Date(selectedUser.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{selectedUser.client && (
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Client Information</h4>
|
||||
<div className="space-y-1 text-sm">
|
||||
<p><span className="font-medium">Membership:</span> {selectedUser.client.membershipType}</p>
|
||||
<p><span className="font-medium">Status:</span> {selectedUser.client.membershipStatus}</p>
|
||||
<p><span className="font-medium">Member Since:</span> {selectedUser.client.joinDate.toLocaleDateString()}</p>
|
||||
<p><span className="font-medium">Last Visit:</span> {selectedUser.client.lastVisit?.toLocaleDateString() || 'Never'}</p>
|
||||
<p>
|
||||
<span className="font-medium">Membership:</span>{" "}
|
||||
{selectedUser.client.membershipType}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Status:</span>{" "}
|
||||
{selectedUser.client.membershipStatus}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Member Since:</span>{" "}
|
||||
{new Date(
|
||||
selectedUser.client.joinDate,
|
||||
).toLocaleDateString()}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Last Visit:</span>{" "}
|
||||
{selectedUser.client.lastVisit
|
||||
? new Date(
|
||||
selectedUser.client.lastVisit,
|
||||
).toLocaleDateString()
|
||||
: "Never"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -176,5 +448,5 @@ export function UserManagement() {
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user