admin stuff
This commit is contained in:
Jake Kasper
@@ -32,6 +32,7 @@ import Profile from './pages/Profile/Profile';
|
||||
import AdminDashboard from './pages/Admin/AdminDashboard';
|
||||
import AdminUsers from './pages/Admin/AdminUsers';
|
||||
import AdminProducts from './pages/Admin/AdminProducts';
|
||||
import AdminEquipment from './pages/Admin/AdminEquipment';
|
||||
|
||||
// Error pages
|
||||
import NotFound from './pages/Error/NotFound';
|
||||
@@ -281,6 +282,16 @@ function App() {
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/admin/equipment"
|
||||
element={
|
||||
<ProtectedRoute adminOnly>
|
||||
<Layout>
|
||||
<AdminEquipment />
|
||||
</Layout>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Error Routes */}
|
||||
<Route path="/unauthorized" element={<Unauthorized />} />
|
||||
|
||||
@@ -132,6 +132,13 @@ const AdminDashboard = () => {
|
||||
<div className="font-medium text-gray-900">Manage Products</div>
|
||||
<div className="text-sm text-gray-500">Add and manage lawn care products</div>
|
||||
</Link>
|
||||
<Link
|
||||
to="/admin/equipment"
|
||||
className="block w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="font-medium text-gray-900">Manage Equipment</div>
|
||||
<div className="text-sm text-gray-500">Add and manage lawn care equipment</div>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => window.open(`${process.env.REACT_APP_API_URL}/admin/system/health`, '_blank')}
|
||||
className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
||||
|
||||
472
frontend/src/pages/Admin/AdminEquipment.js
Normal file
472
frontend/src/pages/Admin/AdminEquipment.js
Normal file
@@ -0,0 +1,472 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
WrenchScrewdriverIcon,
|
||||
MagnifyingGlassIcon,
|
||||
PlusIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
ExclamationTriangleIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { adminAPI, equipmentAPI } from '../../services/api';
|
||||
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const AdminEquipment = () => {
|
||||
const [equipment, setEquipment] = useState([]);
|
||||
const [equipmentTypes, setEquipmentTypes] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState('all');
|
||||
const [categoryFilter, setCategoryFilter] = useState('all');
|
||||
const [selectedEquipment, setSelectedEquipment] = useState(null);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
customName: '',
|
||||
manufacturer: '',
|
||||
model: '',
|
||||
equipmentTypeId: '',
|
||||
width: '',
|
||||
capacity: '',
|
||||
notes: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [equipmentResponse, typesResponse] = await Promise.all([
|
||||
equipmentAPI.getEquipment(),
|
||||
equipmentAPI.getEquipmentTypes()
|
||||
]);
|
||||
|
||||
setEquipment(equipmentResponse.data.data.equipment || []);
|
||||
setEquipmentTypes(typesResponse.data.data.types || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch equipment:', error);
|
||||
toast.error('Failed to load equipment');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await equipmentAPI.createEquipment(formData);
|
||||
toast.success('Equipment created successfully');
|
||||
setShowCreateModal(false);
|
||||
resetForm();
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to create equipment:', error);
|
||||
toast.error('Failed to create equipment');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await equipmentAPI.updateEquipment(selectedEquipment.id, formData);
|
||||
toast.success('Equipment updated successfully');
|
||||
setShowEditModal(false);
|
||||
resetForm();
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to update equipment:', error);
|
||||
toast.error('Failed to update equipment');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await equipmentAPI.deleteEquipment(selectedEquipment.id);
|
||||
toast.success('Equipment deleted successfully');
|
||||
setShowDeleteModal(false);
|
||||
setSelectedEquipment(null);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete equipment:', error);
|
||||
toast.error('Failed to delete equipment');
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
customName: '',
|
||||
manufacturer: '',
|
||||
model: '',
|
||||
equipmentTypeId: '',
|
||||
width: '',
|
||||
capacity: '',
|
||||
notes: ''
|
||||
});
|
||||
setSelectedEquipment(null);
|
||||
};
|
||||
|
||||
const openEditModal = (equip) => {
|
||||
setSelectedEquipment(equip);
|
||||
setFormData({
|
||||
customName: equip.customName || '',
|
||||
manufacturer: equip.manufacturer || '',
|
||||
model: equip.model || '',
|
||||
equipmentTypeId: equip.equipmentTypeId || '',
|
||||
width: equip.width || '',
|
||||
capacity: equip.capacity || '',
|
||||
notes: equip.notes || ''
|
||||
});
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
// Filter equipment based on filters
|
||||
const filteredEquipment = equipment.filter(equip => {
|
||||
const matchesSearch = !searchTerm ||
|
||||
(equip.customName && equip.customName.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
||||
(equip.manufacturer && equip.manufacturer.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
||||
(equip.model && equip.model.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
|
||||
const matchesType = typeFilter === 'all' ||
|
||||
(equip.equipmentTypeId && equip.equipmentTypeId.toString() === typeFilter);
|
||||
|
||||
const matchesCategory = categoryFilter === 'all' ||
|
||||
(equip.categoryName && equip.categoryName.toLowerCase() === categoryFilter.toLowerCase());
|
||||
|
||||
return matchesSearch && matchesType && matchesCategory;
|
||||
});
|
||||
|
||||
const EquipmentForm = ({ onSubmit, submitText }) => (
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Equipment Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.customName}
|
||||
onChange={(e) => setFormData({ ...formData, customName: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="My Spreader, Front Sprayer, etc."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Equipment Type *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
value={formData.equipmentTypeId}
|
||||
onChange={(e) => setFormData({ ...formData, equipmentTypeId: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select Type</option>
|
||||
{equipmentTypes.map(type => (
|
||||
<option key={type.id} value={type.id}>{type.name} ({type.category})</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Manufacturer
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.manufacturer}
|
||||
onChange={(e) => setFormData({ ...formData, manufacturer: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="John Deere, Toro, etc."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Model
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.model}
|
||||
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Model number or name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Width (feet)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
value={formData.width}
|
||||
onChange={(e) => setFormData({ ...formData, width: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="12.5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Capacity
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.capacity}
|
||||
onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="25 gallons, 50 lbs, etc."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Notes
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.notes}
|
||||
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
||||
rows="3"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Additional details, maintenance notes, etc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowCreateModal(false);
|
||||
setShowEditModal(false);
|
||||
resetForm();
|
||||
}}
|
||||
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
|
||||
>
|
||||
{submitText}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Manage Equipment</h1>
|
||||
<p className="text-gray-600">Add, edit, and manage all equipment</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="btn-primary flex items-center"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5 mr-2" />
|
||||
Add Equipment
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search equipment..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">All Types</option>
|
||||
{equipmentTypes.map(type => (
|
||||
<option key={type.id} value={type.id}>{type.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={categoryFilter}
|
||||
onChange={(e) => setCategoryFilter(e.target.value)}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">All Categories</option>
|
||||
<option value="spreader">Spreaders</option>
|
||||
<option value="sprayer">Sprayers</option>
|
||||
<option value="mower">Mowers</option>
|
||||
<option value="aerator">Aerators</option>
|
||||
<option value="seeder">Seeders</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Equipment
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Type
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Specifications
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Owner
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{filteredEquipment.map((equip) => (
|
||||
<tr key={equip.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-orange-100 flex items-center justify-center">
|
||||
<WrenchScrewdriverIcon className="h-6 w-6 text-orange-600" />
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{equip.customName}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{equip.manufacturer} {equip.model}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-900">{equip.typeName}</div>
|
||||
<div className="text-sm text-gray-500">{equip.categoryName}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
<div>
|
||||
{equip.width && <div>Width: {equip.width} ft</div>}
|
||||
{equip.capacity && <div>Capacity: {equip.capacity}</div>}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-900">{equip.userFirstName} {equip.userLastName}</div>
|
||||
<div className="text-sm text-gray-500">{equip.userEmail}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => openEditModal(equip)}
|
||||
className="text-indigo-600 hover:text-indigo-900"
|
||||
title="Edit Equipment"
|
||||
>
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedEquipment(equip);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
title="Delete Equipment"
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreateModal && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Add New Equipment
|
||||
</h3>
|
||||
<EquipmentForm onSubmit={handleCreate} submitText="Create Equipment" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Modal */}
|
||||
{showEditModal && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Edit Equipment
|
||||
</h3>
|
||||
<EquipmentForm onSubmit={handleUpdate} submitText="Update Equipment" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Modal */}
|
||||
{showDeleteModal && selectedEquipment && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center mb-4">
|
||||
<ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Delete Equipment
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
Are you sure you want to delete "{selectedEquipment.customName}"?
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
|
||||
>
|
||||
Delete Equipment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminEquipment;
|
||||
@@ -1,12 +1,556 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
BeakerIcon,
|
||||
MagnifyingGlassIcon,
|
||||
PlusIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
ExclamationTriangleIcon,
|
||||
TagIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { adminAPI, productsAPI } from '../../services/api';
|
||||
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const AdminProducts = () => {
|
||||
const [products, setProducts] = useState([]);
|
||||
const [userProducts, setUserProducts] = useState([]);
|
||||
const [categories, setCategories] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [categoryFilter, setCategoryFilter] = useState('all');
|
||||
const [typeFilter, setTypeFilter] = useState('all');
|
||||
const [productTypeFilter, setProductTypeFilter] = useState('all'); // shared vs custom
|
||||
const [selectedProduct, setSelectedProduct] = useState(null);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
brand: '',
|
||||
categoryId: '',
|
||||
productType: 'granular',
|
||||
activeIngredients: '',
|
||||
description: '',
|
||||
rates: [{ applicationType: 'granular', rateAmount: '', rateUnit: 'lbs/1000 sq ft', notes: '' }]
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [searchTerm, categoryFilter, typeFilter]);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [productsResponse, categoriesResponse] = await Promise.all([
|
||||
productsAPI.getProducts({
|
||||
search: searchTerm,
|
||||
category: categoryFilter !== 'all' ? categoryFilter : '',
|
||||
type: typeFilter !== 'all' ? typeFilter : ''
|
||||
}),
|
||||
productsAPI.getCategories()
|
||||
]);
|
||||
|
||||
setProducts(productsResponse.data.data.sharedProducts || []);
|
||||
setUserProducts(productsResponse.data.data.userProducts || []);
|
||||
setCategories(categoriesResponse.data.data.categories || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch products:', error);
|
||||
toast.error('Failed to load products');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await adminAPI.createProduct(formData);
|
||||
toast.success('Product created successfully');
|
||||
setShowCreateModal(false);
|
||||
resetForm();
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to create product:', error);
|
||||
toast.error('Failed to create product');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await adminAPI.updateProduct(selectedProduct.id, formData);
|
||||
toast.success('Product updated successfully');
|
||||
setShowEditModal(false);
|
||||
resetForm();
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to update product:', error);
|
||||
toast.error('Failed to update product');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
if (selectedProduct.isShared) {
|
||||
await adminAPI.deleteProduct(selectedProduct.id);
|
||||
} else {
|
||||
await productsAPI.deleteUserProduct(selectedProduct.id);
|
||||
}
|
||||
toast.success('Product deleted successfully');
|
||||
setShowDeleteModal(false);
|
||||
setSelectedProduct(null);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete product:', error);
|
||||
toast.error('Failed to delete product');
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
name: '',
|
||||
brand: '',
|
||||
categoryId: '',
|
||||
productType: 'granular',
|
||||
activeIngredients: '',
|
||||
description: '',
|
||||
rates: [{ applicationType: 'granular', rateAmount: '', rateUnit: 'lbs/1000 sq ft', notes: '' }]
|
||||
});
|
||||
setSelectedProduct(null);
|
||||
};
|
||||
|
||||
const openEditModal = (product) => {
|
||||
setSelectedProduct(product);
|
||||
setFormData({
|
||||
name: product.name || product.customName || '',
|
||||
brand: product.brand || product.customBrand || '',
|
||||
categoryId: product.categoryId || '',
|
||||
productType: product.productType || product.customProductType || 'granular',
|
||||
activeIngredients: product.activeIngredients || product.customActiveIngredients || '',
|
||||
description: product.description || product.customDescription || '',
|
||||
rates: product.rates && product.rates.length > 0 ? product.rates : [{
|
||||
applicationType: product.productType || 'granular',
|
||||
rateAmount: product.customRateAmount || '',
|
||||
rateUnit: product.customRateUnit || 'lbs/1000 sq ft',
|
||||
notes: ''
|
||||
}]
|
||||
});
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const addRate = () => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
rates: [...prev.rates, { applicationType: prev.productType, rateAmount: '', rateUnit: prev.productType === 'granular' ? 'lbs/1000 sq ft' : 'oz/1000 sq ft', notes: '' }]
|
||||
}));
|
||||
};
|
||||
|
||||
const removeRate = (index) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
rates: prev.rates.filter((_, i) => i !== index)
|
||||
}));
|
||||
};
|
||||
|
||||
const updateRate = (index, field, value) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
rates: prev.rates.map((rate, i) =>
|
||||
i === index ? { ...rate, [field]: value } : rate
|
||||
)
|
||||
}));
|
||||
};
|
||||
|
||||
// Filter products based on shared/custom filter
|
||||
const allProducts = [
|
||||
...(productTypeFilter === 'custom' ? [] : products.map(p => ({ ...p, isShared: true }))),
|
||||
...(productTypeFilter === 'shared' ? [] : userProducts.map(p => ({ ...p, isShared: false })))
|
||||
];
|
||||
|
||||
const ProductForm = ({ onSubmit, submitText }) => (
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Product Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Brand
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.brand}
|
||||
onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Category
|
||||
</label>
|
||||
<select
|
||||
value={formData.categoryId}
|
||||
onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select Category</option>
|
||||
{categories.map(cat => (
|
||||
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Product Type *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
value={formData.productType}
|
||||
onChange={(e) => setFormData({ ...formData, productType: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="granular">Granular</option>
|
||||
<option value="liquid">Liquid</option>
|
||||
<option value="seed">Seed</option>
|
||||
<option value="powder">Powder</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Active Ingredients
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.activeIngredients}
|
||||
onChange={(e) => setFormData({ ...formData, activeIngredients: e.target.value })}
|
||||
rows="3"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
rows="3"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Application Rates */}
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Application Rates
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addRate}
|
||||
className="text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
+ Add Rate
|
||||
</button>
|
||||
</div>
|
||||
{formData.rates.map((rate, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-md p-3 mb-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Rate Amount"
|
||||
value={rate.rateAmount}
|
||||
onChange={(e) => updateRate(index, 'rateAmount', e.target.value)}
|
||||
className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
<select
|
||||
value={rate.rateUnit}
|
||||
onChange={(e) => updateRate(index, 'rateUnit', e.target.value)}
|
||||
className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value="lbs/1000 sq ft">lbs/1000 sq ft</option>
|
||||
<option value="oz/1000 sq ft">oz/1000 sq ft</option>
|
||||
<option value="lbs/acre">lbs/acre</option>
|
||||
<option value="oz/acre">oz/acre</option>
|
||||
</select>
|
||||
{formData.rates.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeRate(index)}
|
||||
className="text-red-600 hover:text-red-800 text-sm"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Notes (optional)"
|
||||
value={rate.notes}
|
||||
onChange={(e) => updateRate(index, 'notes', e.target.value)}
|
||||
className="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowCreateModal(false);
|
||||
setShowEditModal(false);
|
||||
resetForm();
|
||||
}}
|
||||
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
|
||||
>
|
||||
{submitText}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Manage Products</h1>
|
||||
<div className="card">
|
||||
<p className="text-gray-600">Product management coming soon...</p>
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Manage Products</h1>
|
||||
<p className="text-gray-600">Add, edit, and manage all lawn care products</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="btn-primary flex items-center"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5 mr-2" />
|
||||
Add Product
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={categoryFilter}
|
||||
onChange={(e) => setCategoryFilter(e.target.value)}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">All Categories</option>
|
||||
{categories.map(cat => (
|
||||
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">All Types</option>
|
||||
<option value="granular">Granular</option>
|
||||
<option value="liquid">Liquid</option>
|
||||
<option value="seed">Seed</option>
|
||||
<option value="powder">Powder</option>
|
||||
</select>
|
||||
<select
|
||||
value={productTypeFilter}
|
||||
onChange={(e) => setProductTypeFilter(e.target.value)}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">Shared & Custom</option>
|
||||
<option value="shared">Shared Only</option>
|
||||
<option value="custom">Custom Only</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Product
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Type
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Category
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Source
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{allProducts.map((product) => (
|
||||
<tr key={`${product.isShared ? 'shared' : 'custom'}-${product.id}`} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
|
||||
<BeakerIcon className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{product.name || product.customName}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{product.brand || product.customBrand}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
(product.productType || product.customProductType) === 'granular'
|
||||
? 'bg-blue-100 text-blue-800'
|
||||
: (product.productType || product.customProductType) === 'liquid'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{product.productType || product.customProductType}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{product.categoryName || 'Uncategorized'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
product.isShared
|
||||
? 'bg-purple-100 text-purple-800'
|
||||
: 'bg-orange-100 text-orange-800'
|
||||
}`}>
|
||||
{product.isShared ? 'Shared' : 'Custom'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => openEditModal(product)}
|
||||
className="text-indigo-600 hover:text-indigo-900"
|
||||
title="Edit Product"
|
||||
>
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedProduct(product);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
title="Delete Product"
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreateModal && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Create New Product
|
||||
</h3>
|
||||
<ProductForm onSubmit={handleCreate} submitText="Create Product" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Modal */}
|
||||
{showEditModal && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Edit Product
|
||||
</h3>
|
||||
<ProductForm onSubmit={handleUpdate} submitText="Update Product" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Modal */}
|
||||
{showDeleteModal && selectedProduct && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center mb-4">
|
||||
<ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Delete Product
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
Are you sure you want to delete "{selectedProduct.name || selectedProduct.customName}"?
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
|
||||
>
|
||||
Delete Product
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,12 +1,358 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
UsersIcon,
|
||||
MagnifyingGlassIcon,
|
||||
UserPlusIcon,
|
||||
TrashIcon,
|
||||
CogIcon,
|
||||
EnvelopeIcon,
|
||||
KeyIcon,
|
||||
ExclamationTriangleIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { adminAPI } from '../../services/api';
|
||||
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const AdminUsers = () => {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [roleFilter, setRoleFilter] = useState('all');
|
||||
const [pagination, setPagination] = useState(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
const [showRoleModal, setShowRoleModal] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [showInviteModal, setShowInviteModal] = useState(false);
|
||||
|
||||
const fetchUsers = async (page = 1) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = {
|
||||
page,
|
||||
limit: 20,
|
||||
...(searchTerm && { search: searchTerm }),
|
||||
...(roleFilter !== 'all' && { role: roleFilter })
|
||||
};
|
||||
|
||||
const response = await adminAPI.getUsers(params);
|
||||
setUsers(response.data.data.users);
|
||||
setPagination(response.data.data.pagination);
|
||||
setCurrentPage(page);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch users:', error);
|
||||
toast.error('Failed to load users');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers(1);
|
||||
}, [searchTerm, roleFilter]);
|
||||
|
||||
const handleRoleChange = async (newRole) => {
|
||||
try {
|
||||
await adminAPI.updateUserRole(selectedUser.id, newRole);
|
||||
toast.success(`User role updated to ${newRole}`);
|
||||
setShowRoleModal(false);
|
||||
setSelectedUser(null);
|
||||
fetchUsers(currentPage);
|
||||
} catch (error) {
|
||||
console.error('Failed to update role:', error);
|
||||
toast.error('Failed to update user role');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async () => {
|
||||
try {
|
||||
await adminAPI.deleteUser(selectedUser.id);
|
||||
toast.success('User deleted successfully');
|
||||
setShowDeleteModal(false);
|
||||
setSelectedUser(null);
|
||||
fetchUsers(currentPage);
|
||||
} catch (error) {
|
||||
console.error('Failed to delete user:', error);
|
||||
toast.error('Failed to delete user');
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Manage Users</h1>
|
||||
<div className="card">
|
||||
<p className="text-gray-600">User management coming soon...</p>
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Manage Users</h1>
|
||||
<p className="text-gray-600">Add, edit, and manage user accounts</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowInviteModal(true)}
|
||||
className="btn-primary flex items-center"
|
||||
>
|
||||
<UserPlusIcon className="h-5 w-5 mr-2" />
|
||||
Invite User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
<div className="flex-1 relative">
|
||||
<MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={roleFilter}
|
||||
onChange={(e) => setRoleFilter(e.target.value)}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">All Roles</option>
|
||||
<option value="admin">Admins</option>
|
||||
<option value="user">Users</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Users Table */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
User
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Role
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Properties
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Applications
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Joined
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{users.map((user) => (
|
||||
<tr key={user.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
|
||||
<UsersIcon className="h-6 w-6 text-blue-600" />
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{user.firstName} {user.lastName}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
user.role === 'admin'
|
||||
? 'bg-purple-100 text-purple-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{user.role}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{user.propertyCount}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-900">{user.applicationCount}</div>
|
||||
{user.lastApplication && (
|
||||
<div className="text-xs text-gray-500">
|
||||
Last: {formatDate(user.lastApplication)}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{formatDate(user.createdAt)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedUser(user);
|
||||
setShowRoleModal(true);
|
||||
}}
|
||||
className="text-indigo-600 hover:text-indigo-900"
|
||||
title="Change Role"
|
||||
>
|
||||
<CogIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedUser(user);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
title="Delete User"
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{pagination && pagination.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<div className="text-sm text-gray-700">
|
||||
Showing page {pagination.currentPage} of {pagination.totalPages}
|
||||
({pagination.totalUsers} total users)
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => fetchUsers(currentPage - 1)}
|
||||
disabled={!pagination.hasPrev}
|
||||
className="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={() => fetchUsers(currentPage + 1)}
|
||||
disabled={!pagination.hasNext}
|
||||
className="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Role Change Modal */}
|
||||
{showRoleModal && selectedUser && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Change Role for {selectedUser.firstName} {selectedUser.lastName}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
Current role: <span className="font-medium">{selectedUser.role}</span>
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
onClick={() => setShowRoleModal(false)}
|
||||
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{selectedUser.role !== 'user' && (
|
||||
<button
|
||||
onClick={() => handleRoleChange('user')}
|
||||
className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
|
||||
>
|
||||
Make User
|
||||
</button>
|
||||
)}
|
||||
{selectedUser.role !== 'admin' && (
|
||||
<button
|
||||
onClick={() => handleRoleChange('admin')}
|
||||
className="px-4 py-2 text-sm text-white bg-purple-600 rounded hover:bg-purple-700"
|
||||
>
|
||||
Make Admin
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Modal */}
|
||||
{showDeleteModal && selectedUser && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center mb-4">
|
||||
<ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Delete User
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
Are you sure you want to delete {selectedUser.firstName} {selectedUser.lastName}?
|
||||
This action cannot be undone and will permanently remove all their data.
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeleteUser}
|
||||
className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
|
||||
>
|
||||
Delete User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invite User Modal */}
|
||||
{showInviteModal && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Invite User
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
Feature coming soon: Send email invitations to new users.
|
||||
</p>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => setShowInviteModal(false)}
|
||||
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user