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 AdminDashboard from './pages/Admin/AdminDashboard';
|
||||||
import AdminUsers from './pages/Admin/AdminUsers';
|
import AdminUsers from './pages/Admin/AdminUsers';
|
||||||
import AdminProducts from './pages/Admin/AdminProducts';
|
import AdminProducts from './pages/Admin/AdminProducts';
|
||||||
|
import AdminEquipment from './pages/Admin/AdminEquipment';
|
||||||
|
|
||||||
// Error pages
|
// Error pages
|
||||||
import NotFound from './pages/Error/NotFound';
|
import NotFound from './pages/Error/NotFound';
|
||||||
@@ -281,6 +282,16 @@ function App() {
|
|||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="/admin/equipment"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute adminOnly>
|
||||||
|
<Layout>
|
||||||
|
<AdminEquipment />
|
||||||
|
</Layout>
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Error Routes */}
|
{/* Error Routes */}
|
||||||
<Route path="/unauthorized" element={<Unauthorized />} />
|
<Route path="/unauthorized" element={<Unauthorized />} />
|
||||||
|
|||||||
@@ -132,6 +132,13 @@ const AdminDashboard = () => {
|
|||||||
<div className="font-medium text-gray-900">Manage Products</div>
|
<div className="font-medium text-gray-900">Manage Products</div>
|
||||||
<div className="text-sm text-gray-500">Add and manage lawn care products</div>
|
<div className="text-sm text-gray-500">Add and manage lawn care products</div>
|
||||||
</Link>
|
</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
|
<button
|
||||||
onClick={() => window.open(`${process.env.REACT_APP_API_URL}/admin/system/health`, '_blank')}
|
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"
|
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 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 (
|
return (
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Manage Products</h1>
|
<div className="mb-6">
|
||||||
<div className="card">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<p className="text-gray-600">Product management coming soon...</p>
|
<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>
|
</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>
|
</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 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 (
|
return (
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Manage Users</h1>
|
<div className="mb-6">
|
||||||
<div className="card">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<p className="text-gray-600">User management coming soon...</p>
|
<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>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user